//- This is unbuffered comment (will not show up in generated HTML) [http://jade-lang.com/reference/comments]

h1= title

b: p Kategorije izdelkov

//- master variable [see index.js, line 45, 49]
ul
each el in master
    li
        <input type="radio" name="group1" value='+el.CategoryID+' onclick='document.location="/index?category=1"'> #{el.CategoryName} (#{el.Description})</input>

        - if (selected == el.CategoryID)
            b: a(href= '/index?category='+el.CategoryID) #{el.CategoryName}
        - else
            a(href= '/index?category='+el.CategoryID) #{el.CategoryName}
        //- GET Param.  ^----------------------^
        //- Iteration [http://jade-lang.com/reference/iteration]
        //- Attributes "a(href...)" [http://jade-lang.com/reference/attributes]
        //- Inline JS "#{el.CategoryName}" [http://jade-lang.com/reference/code, see Interpolation]

//- detail variable [see index.js, line 45, 49]
if detail != null
    b: p= titleP

    <ul>
    <button onclick="dodaj()" background-color:Transparent background-repeat:no-repeat border:none cursor:pointer overflow:hidden outline:none>dodaj</button>
    <button onclick="posodobi()" background-color:Transparent background-repeat:no-repeat border:none cursor:pointer overflow:hidden outline:none>posodobi</button>
    <button onclick="zbrisi()" background-color:Transparent background-repeat:no-repeat border:none cursor:pointer overflow:hidden outline:none>izbriši</button>
    </ul>
    <br></br>

    <div>
    <table class='table'><tr><th class ='text-left' align='left'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ime izdelka</th><th class='text-right' align='left'>&nbsp;&nbsp;&nbsp;Cena &nbsp;&nbsp;&nbsp;</th><th class='text-right' align='left'>Zaloga</th></tr>

    each el in detail
        <tr><td><input id=el.ProductID onclick="izbranProdukt()" type="radio" name="group2" value=el.ProductID>#{el.ProductName}</td><td class='text-right'>&nbsp;&nbsp;&nbsp;#{el.UnitPrice} € &nbsp;&nbsp;&nbsp;</td><td class='text-right'>#{el.UnitsInStock}x</td></input></tr>
        //<table class='table'><tr><th class ='text-left'>#{el.ProductName}</th><th class='text-right'>#{el.UnitPrice} €</th><th class='text-right'>#{el.UnitsInStock}x</th></tr>
        //li= el.ProductName +" "+ el.UnitPrice +" € "+ el.UnitsInStock + "x"
        //- Conditionals [http://jade-lang.com/reference/conditionals]
        //- Iteration [http://jade-lang.com/reference/iteration]
        //- Inline JS "#{el.CompanyName}" [http://jade-lang.com/reference/code, see Buffered Code]
    </table>
    </div>