{% extends "layout.html" %}
{% block content %}
<section class="collection-page" aria-labelledby="CollectionHeading">
    <header class="page-heading collection-heading">
        <div>
            <p class="eyebrow">Your daily discoveries</p>
            <h1 id="CollectionHeading">Your collection</h1>
        </div>
        <div class="pull-panel">
            <div class="pull-count">
                <strong>{{ available_pulls }}</strong>
                <span>available pulls</span>
            </div>
            <form method="post" action="{{ pull_url }}">
                <input type="hidden" name="csrf_token"
                       value="{{ csrf_token }}">
                <button class="pull-button" type="submit"
                        {% if pull_disabled %}disabled{% endif %}>
                    Pull a card
                </button>
            </form>
        </div>
    </header>
    {% if pool_empty %}
    <div class="collection-notice" role="status">
        <span class="clay-icon clay-icon-pink" aria-hidden="true">!</span>
        <div>
            <strong>The card pool is empty</strong>
            <p>Check back after a creator adds some cards.</p>
        </div>
    </div>
    {% endif %}
    {% if length(entries) == 0 %}
    <div class="collection-empty">
        <div class="clay-icon clay-icon-blue" aria-hidden="true">✦</div>
        <h2>Your collection is ready to grow</h2>
        <p>Cards you pull will appear here.</p>
    </div>
    {% endif %}
    <ul class="collection-grid">
    {% for entry in entries %}
        <li class="collection-card">
            <a href="{{ entry.url }}">
                <span class="collection-image">
                    <img src="{{ entry.thumbnail_url }}"
                         alt="{{ entry.name }}">
                </span>
                <span class="collection-card-details">
                    <strong class="collection-card-name">
                        {{ entry.name }}
                    </strong>
                    <span>View card</span>
                </span>
                <strong class="collection-quantity"
                        aria-label="Quantity {{ entry.quantity }}">
                    ×{{ entry.quantity }}
                </strong>
            </a>
        </li>
    {% endfor %}
    </ul>
</section>
{% endblock %}