<!DOCTYPE html>
<html>
<head>
  <%= render '_head' %>
</head>
<body class="articles">
  <%= render '_header' %>
  <div id="content">
    <h1><%= h(@item[:title] || 'Articles') %></h1>

    <%
      menu = [
        ['All', sorted_articles.size],
        ['Technical', technical_articles.size],
        ['Personal', personal_articles.size],
      ]
    %>
    <nav class="inline search">
      <li id="search">
        <fieldset>
          <label for="query">Search</label>
          <input id="query" type="search" incremental="" results="0" placeholder="Search Articles">
        </fieldset>
      </li>
      <% menu.each do |menu_item|
        label, count = menu_item
        path = (label != "All" ? '/' + label.downcase : '') + "/articles/"
        if label != "All"
          feed = "/#{label.downcase}/feed/"
        else
          feed = '/feed/'
        end
        active = (@item.identifier.sub(%r{page/$}, '') == path)
      %>
      <li>
        <a href="<%= feed %>"><img class="feed-icon" src="/images/feed-icon.svg" width="12" height="12" alt="Feed Icon" /></a>
        <a href="<%= path %>"<%= %Q{class="active"} if active %>><%= label %></a> (<%= count %>)
      </li>
      <% end %>
    </nav>

    <ul id="articles" class="articles">
      <%= yield %>
    </ul>

  </div>
  <%= render '_footer' %>
</body>
</html>