<!DOCTYPE html>
<html>
<head>
  <%= render '_head' %>
  <link rel="stylesheet" href="/css/jsonSuggest.css" type="text/css" media="screen" charset="utf-8" />
  <script src="/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="/js/jquery.ba-bbq.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="/js/jquery.jsonSuggest.js" type="text/javascript" charset="utf-8"></script>
  <script src="/js/mojo.js" type="text/javascript" charset="utf-8"></script>
  <script src="/js/application.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    WezM.loadArticles(function() {
      jQuery(function() {
        WezM.showJavascriptWidgets();
        <% if @item.identifier =~ %r{/page/$} %>
        $(window).bind('hashchange', function(e) {
          WezM._hashChanged(e)
        });
        // Since the event is only triggered when the hash changes, we need to trigger
        // the event now, to handle the hash the page may have loaded with.
        $(window).trigger('hashchange');
        <% end %>
      });
    });
  </script>
</head>
<body class="articles">
  <%= render '_header' %>
  <div id="content">
    <h1>Archives</h1>

    <%
      menu = [
        ['All', sorted_articles.size],
        ['Technical', technical_articles.size],
        ['Personal', personal_articles.size],
      ]
    %>
    <ul class="inline menu">
      <% menu.each do |menu_item|
        label, count = menu_item
        path = (label != "All" ? '/' + label.downcase : '') + "/articles/"
        active = (@item.identifier.sub(%r{page/$}, '') == path)
      %>
      <li><a href="<%= path %>"<%= %Q{class="active"} if active %>><%= label %></a> (<%= count %>)</li>
      <% end %>
      <li id="search">
        <fieldset>
          <label for="query">Search</label>
          <input type="text" name="q" id="query" value="" />
          <span class="sbox_r"></span>
        </fieldset>
      </li>
    </ul>

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

    <div class="pagination">
      <% pagepath = @item.identifier; pagepath += 'page/' if pagepath !~ %r{/page/$} %>
      <a href="<%= pagepath %>" class="newer">&laquo; Newer</a>
      |
      <a href="<%= pagepath %>#2" class="older">Older &raquo;</a>
    </div>
  </div>
  <%= render '_footer' %>
</body>
</html>