{% extends "core/base.html" %}

{% block title_text %}Tarot — {{ room.name }}{% endblock title_text %}
{% block header_text %}<span>Tarot</span> — {{ room.name }}{% endblock header_text %}

{% block content %}
<div class="tarot-page">
  <p data-tarot-remaining="{{ remaining }}">
    {{ remaining }} card{{ remaining|pluralize }} remaining
    {% if deck.deck_variant %}({{ deck.deck_variant.name }}){% endif %}
  </p>

  {% if not positions %}
    <form method="post" action="{% url 'epic:tarot_deal' room.id %}">
      {% csrf_token %}
      <button type="submit" data-deal-spread>Deal Celtic Cross</button>
    </form>
  {% else %}
    <div class="tarot-spread">
      {% for pos in positions %}
        <div class="tarot-position" data-position="{{ pos.position }}">
          <span class="tarot-card-name">{{ pos.card.name }}</span>
          <span class="tarot-card-orientation">{{ pos.orientation }}</span>
        </div>
      {% endfor %}
    </div>

    <p data-tarot-remaining="{{ remaining }}">
      {{ remaining }} card{{ remaining|pluralize }} remaining
    </p>
  {% endif %}
</div>
{% endblock content %}