!!! 5
%html{:xmlns => "http://www.w3.org/1999/xhtml"}
  %head
    %title The Backbone Store
    %link{:charset => "utf-8", :href => "jsonstore.css", :rel => "stylesheet", :type => "text/css"}/
    %script#store_index_template(type="text/x-underscore-tmplate")
      %h1 Product Catalog
      %ul
        <% for(i=0,l=products.length;i<l;++i) { p = products[i]; %>
        %li.item
          .item-image
            %a{:href => "#item/<%= p.id %>"}
              %img{:src => "<%= p.image %>", :alt => "<%= p.title %>"}/
          .item-artist <%= p.artist %>
          .item-title <%= p.title %>
          .item-price $<%= p.price %>
        <% } %>

    %script#store_item_template(type= "text/x-underscore-template")
      .item-detail
        .item-image
          %img(src="<%= large_image %>" alt="<%= title %>")/
        .item-info
          .item-artist <%= artist %>
          .item-title <%= title %>
          .item-price $<%= price %>
          .item-form
          %form(action="#/cart" method="post")
            %p
              %label Quantity:
              %input(type="text" size="2" name="quantity" value="1" class="uqf")/
            %p
              %input(type="submit" value="Add to Cart" class="uq")/

          .item-link
            %a(href="<%= url %>") Buy this item on Amazon
          .back-link
            %a(href="#") &laquo; Back to Items
    %script#store_cart_template(type="text/x-underscore-template")
      %p Items: <%= count %> ($<%= cost %>)

    </head>
  %body
    #container
      #header
        %h1
          The Backbone Store
        .cart-info
      #main
    %script{:src => "lib/jquery.js", :type => "text/javascript"}
    %script{:src => "lib/underscore.js", :type => "text/javascript"}
    %script{:src => "lib/backbone.js", :type => "text/javascript"}
    %script{:src => "store.js", :type => "text/javascript"}