<h2 class=uk-title>Tag: <%= tag %></h2>
<p class="uk-text-meta"><%= titles.size %> <%= titles.size > 1 ? "titles" : "title" %> tagged</p>
<div class="uk-grid-small" uk-grid>
  <div class="uk-margin-bottom uk-width-3-4@s">
    <form class="uk-search uk-search-default">
      <span uk-search-icon></span>
      <input class="uk-search-input" type="search" placeholder="Search">
    </form>
  </div>
  <div class="uk-margin-bottom uk-width-1-4@s">
    <% hash = {
      "auto" => "Auto",
      "time_modified" => "Date Modified",
      "progress" => "Progress"
    } %>
    <%= render_component "sort-form" %>
  </div>
</div>
<div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
  <% titles.each_with_index do |item, i| %>
    <% progress = percentage[i] %>
    <%= render_component "card" %>
  <% end %>
</div>

<% content_for "script" do %>
  <%= render_component "dots" %>
  <script src="<%= base_url %>js/search.js"></script>
  <script src="<%= base_url %>js/sort-items.js"></script>
<% end %>
