

  <div class="wrapper">
    <div id="toolbar">
      <div class="filter fn">
        <span class="label">Price</span>
        <div class="drop-menu ui">
          <a href="" class="controller">
            <span class="option-default">All</span>
            <span class="arrow down"></span>
          </a>
          <ul class="option-list">
            <li><a class="option-item" href="">All</a></li>
            <li><a class="option-item" href="">15,000</a></li>
            <li><a class="option-item" href="">20,000</a></li>
            <li><a class="option-item" href="">25,000</a></li>
          </ul>
        </div>
      </div>
      
      <div class="filter fn">
        <span class="label">Category</span>
        <div class="drop-menu ui">
          <a href="" class="controller">
            <span class="option-default">All</span>
            <span class="arrow down"></span>
          </a>
          <ul class="option-list">
            <li><a class="option-item" href="">All</a></li>
            <li><a class="option-item" href="">National Taiwan University</a></li>
            <li><a class="option-item" href="">Category 1</a></li>
            <li><a class="option-item" href="">Category 2</a></li>
            <li><a class="option-item" href="">Category 3</a></li>
          </ul>
        </div>
      </div>
      <div class="filter fn">
        <span class="label">Sort by</span>
        <div class="drop-menu ui">
          <a href="" class="controller">
            <span class="option-default">Date</span>
            <span class="arrow down"></span>
          </a>
          <ul class="option-list">
            <li><a class="option-item" href="">Date</a></li>
            <li><a class="option-item" href="">Popular</a></li>
            <li><a class="option-item" href="">Recent Upload</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div id="item-list">
      <ul class="clearfix">
        <% @templates.each do |template| %>
          <li>
            <a href="<%= admin_template_store_template_path(template["_slugs"][0]) %>">
              <img src="<%= @store + template['preview']['preview']['thumb']['url'] %>" class="item-thumb" />
               <span class="item-info">
                <b class="item-name"><%= template['title'] %></b>
                <span class="item-price">Free</span>
              </span>
            </a>
            <%= link_to "Download", "javascript:void(0);", "data-url" => template['template']['template']['url'], :class=> 'btn btn-primary download-link' %>
          </li>
        <% end %>

      </ul>
    </div>
  </div>

<script type="text/javascript">
  (function(){
    $("a.download-link").on(clickEvent,function(){
      var el = $(this),
          downloadurl = $(this).data("url");

      el.removeClass("btn-primary").addClass("btn-info").text("Installing").attr('disabled',"disabled");
      $.ajax({
        url : "<%= admin_template_store_download_theme_path %>",
        data : {"url" : downloadurl},
        dataType : "json",
        type : "post",
        success : function(data){
          if(data.success){
            el.removeClass('btn-info').addClass('btn-success').text("Installed");
          }
        }
      })
    })
  })()
</script>
