{% extends "base.html" %}

{% block jumbotron %}
<div class="jumbotron">
  <div class="container">
    <h1>How good is your deck?</h1>
    <p>Curious how decks like yours have performed in tournaments?<br/>
      Paste your <a href="http://ponyhead.com/deckbuilder">ponyhead.com</a> URL here and find out!</p>
    <p>
      <form action="/meta/rate" method="post" class="form-inline" role="form">
        {% csrf_token %}
        <div class="form-group">
          <label class="sr-only" for="ponyheadURL">ponyhead decklist url</label>
          <input type="url" name="url" class="form-control input-lg" id="ponyheadURL" placeholder="Deck URL, e.g.: http://ponyhead.com/deckbuilder?v1code=..."/>
          <button type="submit" class="btn btn-lg btn-default btn-primary">Tell me!</button>
        </div>
      </form>
    </p>
  </div>
</div>
{% endblock %}

{% block content %}
<div class="row">
  <div class="col-xs-12">
    <h2>Deck archetypes</h2>
    <p>Very fuzzy data, based on past tournaments. The more the deck was played in tournaments, the more accurate this is.</p>
    <table class="table">
      <tr>
        <th>Archetype ID</th>
        <th>Average placement</th>
        <th>Example decks</th>
      </tr>
      {% load humanize %}
      {% for avg, label, decks in ranking %}
      <tr>
        <td>{{ label }}</td>
        <td>{{ avg|ordinal }}</td>
        <td>
          <ul class="list-inline">
            {% for d in decks %}
            <li><a href="{{ d.ponyhead_link }}">{{ d.description }}</a></li>
            {% endfor %}
          </ul>
        </td>
        {% endfor %}
    </table>
  </div>
</div>

<div class="row">
  <div class="col-xs-12">
    <h2>Tournaments</h2>
    <table class="table">
      <tr>
        <th>Date</th>
        <th>Name</th>
        <th>Top Decks</th>
      </tr>
      {% if tournaments %}
      {% for t in tournaments %}
      <tr>
        <td>{{ t.tournament.date }}</td>
        <td>{{ t.tournament.name }}</td>
        <td>
          {% for d in t.decklists|slice:":8" %}
          <a href="{{ d.ponyhead_link }}">{{ d.name }} ({{ d.description }})</a><br/>
          {% endfor %}
        </td>
      </tr>
      {% endfor %}
      {% endif %}
    </table>
  </div>
</div>
{% endblock %}