{% extends 'cwa/base.html.j2' %}

{%- block body %}
  <h1>Set: {{ game.human_id }}</h1>

  <form method="POST">

    <div id="playingfield">
      {%- for card in cards %}
        
        <div class="card"
             data-count="{{ card.count.name }}"
             data-shape="{{ card.shape.name }}"
             data-color="{{ card.color.name }}"
             data-infill="{{ card.infill.name }}">
          <input type="checkbox" id="card-{{ loop.index0 }}" name="set" value="{{ loop.index0 }}" />
          <label for="card-{{ loop.index0 }}">
            {%- set  symbol = card %}
            {%- include 'cwa/setcard.svg.j2' %}
          </label>
        </div>
      {%- endfor %}

    </div>

    <input type="submit" value="Set!" name="action" />
    <input type="submit" value="Draw 3" name="action" />
    <p id="gamestats">
      {%- if game.puzzle.is_completed %}
        <b>Game Over</b> <a href="..">Return to lobby</a>
      {%- else %}
        Draw votes: <b>{{ draw_votes }}</b> / {{ draw_majority }}
        Deck: <b>{{ deck | length }}</b>
      {% endif %}
    </p>

  </form>

  <h2>Scores</h2>
  <ol id="scorelist">
    {%- for score in game.scoreboard %}
      <li>
        <b>{{ game.players[score['player']].name }}</b>
        {{ score['score'] }}
        <div class="playercardlist">
          {%- for symbol in lastset[score['player']] %}
            <div class="card playercard-{{ loop.index0 }}">
              {%- include 'cwa/setcard.svg.j2' %}
            </div>
          {%- endfor %}
        </div>
      </li>
    {%- endfor %}
  </ol>
  <a href="{{ baseurl }}/{{ player.uuid }}/{{ game.uuid }}/play">Refresh</a>

  <script src="/static/set.js"></script>
{%- endblock %}