{% extends "layout.html" %}

{% block content %}
<div class="page-heading">
    <div>
        <p class="eyebrow">Your archive</p>
        <h1>Cards</h1>
    </div>
    <div class="sort-controls" aria-label="Sort cards">
        <span class="sort-label">Sort by public ID</span>
        <a class="sort-button" href="{{ ascending_url }}"
           {% if not descending %}aria-current="page"{% endif %}>Ascending</a>
        <a class="sort-button" href="{{ descending_url }}"
           {% if descending %}aria-current="page"{% endif %}>Descending</a>
    </div>
</div>

<div class="management-actions" aria-label="Card administration actions">
    <a class="clay-action" href="{{ create_url }}">
        Create card
    </a>
{% if administrator %}
    <a class="clay-action clay-action-secondary" href="{{ series_url }}">
        Manage series
    </a>
    <a class="clay-action clay-action-secondary" href="{{ games_url }}">
        View games
    </a>
    <a class="clay-action clay-action-secondary" href="{{ users_url }}">
        Manage users
    </a>
{% endif %}
</div>

{% if administrator %}
<form class="card-filter" method="get" action="{{ index_url }}">
    <input type="hidden" name="sort" value="id">
    <input type="hidden" name="direction"
           value="{% if descending %}desc{% else %}asc{% endif %}">
    <button class="internal-toggle" type="submit" role="switch"
            aria-checked="{% if show_internal %}true{% else %}false{% endif %}"
            name="show_internal"
            value="{% if show_internal %}0{% else %}1{% endif %}">
        <span class="toggle-track" aria-hidden="true"></span>
        Show internal games
    </button>
</form>
{% endif %}

{% if length(cards) == 0 %}
<p class="empty-state">No cards match the current filters.</p>
{% endif %}

<ul class="card-grid">
{% for card in cards %}
    <li class="card-tile">
        <a class="card-image-link" href="{{ card.url }}">
            <img src="{{ card.thumbnail_url }}"
                 alt=""
                 loading="lazy">
        </a>
        <div class="card-details">
            {% if card.internal %}
            <span class="internal-badge">Internal</span>
            {% endif %}
            <a class="card-id" href="{{ card.url }}">
                {{ card.display_id }}
            </a>
            <h2>{{ card.name }}</h2>
        </div>
    </li>
{% endfor %}
</ul>
{% endblock %}