<h1>Matches</h1>
<h3>Of currently active contests</h3>

<div id="matches" class="tabbed">
  <ul id="matches-nav" class="tabs">
    <li><a href="#upcoming">Upcoming</a></li>
    <li><a href="#recent">Recent</a></li>
    <li><a href="#your">Your Matches</a></li>
  </ul>
  <div class="tabbed-contents">
    <div class="tab" id="upcoming">
      <h3>Upcoming Matches</h3>

      <%= render partial: "matches/match", locals: { matches: @matches.unfinished.chrono } %>
    </div>
    <div class="tab" id="recent">
      <h3>Recent Matches</h3>

      <%= render partial: "matches/match", locals: { matches: @matches.realfinished.reverse_order.chrono } %>
    </div>
    <div class="tab" id="your">
      <h3>Your Matches (<%= if cuser then @matches.of_user(cuser).count else 0 end %>)</h3>
      <% if cuser then %>
        <%= render partial: "matches/match", locals: { matches: @matches.of_user(cuser).reverse_order.chrono } %>
      <% end %>
    </div>
  </div>
</div>

<script type="text/javascript">
  new Yetii({
    id: 'matches'
  });
</script>