Use component templates

src/views/components/card.ecr

@@ -0,0 +1,35 @@
+<div class="item" data-mtime="<%= item.mtime.to_unix %>" data-progress="<%= progress || 0.0 %>"
+  <% if item.is_a? Entry %>
+  id="<%= item.id %>"
+  <% end %>>
+
+  <a class="acard"
+    <% unless item.is_a? Entry %>
+    href="<%= base_url %>book/<%= item.id %>"
+    <% end %>>
+
+    <div class="uk-card uk-card-default"
+      <% if item.is_a? Entry %>
+      onclick="showModal(&quot;<%= item.encoded_path %>&quot;, '<%= item.pages %>', <%= (progress.not_nil! * 100).round(1) %>, &quot;<%= item.book.encoded_display_name %>&quot;, &quot;<%= item.encoded_display_name %>&quot;, '<%= item.title_id %>', '<%= item.id %>')"
+      <% end %>>
+
+      <div class="uk-card-media-top">
+        <img data-src="<%= item.cover_url %>" data-width data-height alt="" uk-img>
+      </div>
+
+      <div class="uk-card-body">
+        <% unless (item.is_a? Title && item.entries.size == 0) || progress.nil? %>
+        <div class="uk-card-badge uk-label"><%= (progress * 100).round(1) %>%</div>
+        <% end %>
+
+        <h3 class="uk-card-title break-word" data-title="<%= item.display_name.gsub("\"", "&quot;") %>"><%= item.display_name %></h3>
+        <% if item.is_a? Entry %>
+        <p><%= item.pages %> pages</p>
+        <% end %>
+        <% if item.is_a? Title %>
+        <p><%= item.size %> entries</p>
+        <% end %>
+      </div>
+    </div>
+  </a>
+</div>

src/views/components/sort-form.ecr

@@ -0,0 +1,8 @@
+<div class="uk-form-horizontal">
+  <select class="uk-select" id="sort-select">
+    <% hash.each do |k, v| %>
+    <option id="<%= k %>-up">▲ <%= v %></option>
+    <option id="<%= k %>-down">▼ <%= v %></option>
+    <% end %>
+  </select>
+</div>