<% render partial: 'about/subnav' %>

<div class="box wide">
  <p>
  A hat is a formal, verified, way of posting a comment while speaking for a
  project, organization, or company.  Each user may have multiple hats, one of
  which may be selected to be worn when posting a comment or sending a private
  message.
  </p>

  <% if @user %>
    <h2><a href="<%= request_hat_url %>">Request Hat</a></h2>
  <% end %>

  <table class="data zebra" width="100%" cellspacing=0>
  <tr>
    <th style="width: 130px;">User</th>
    <th>Hat</th>
    <th>Link</th>
  </tr>
  <% @hat_groups.keys.sort_by{|a| a.downcase }.each do |hg| %>
    <% @hat_groups[hg].sort_by{|hh| hh.user.username.downcase }.each do |hh| %>
      <tr>
        <td><%= styled_user_link hh.user %></td>
        <td><%= hh.to_html_label %></td>
        <td>
          <% if hh.link.to_s.match(/^http/) %>
            <a href="<%= hh.link %>" rel="ugc"><%= hh.link %></a>
          <% elsif hh.link.blank? %>
            <span class="na">None</span>
          <% else %>
            <% if @user %>
              <%= hh.link %>
            <% else %>
              <%= hh.sanitized_link %>
            <% end %>
          <% end %>
          <% if hh.doffed_at? %>
            doffed <%= time_ago_in_words_label(hh.doffed_at) %>
          <% end %>
        </td>
      </tr>
    <% end %>
  <% end %>
  </table>
</div>
