{% extends "layout.html" %}

{% block content %}
<section class="games-page" aria-labelledby="GamesHeading">
    <header class="page-heading">
        <div>
            <p class="eyebrow">Administration</p>
            <h1 id="GamesHeading">Games</h1>
        </div>
        <div class="management-actions" aria-label="Game actions">
            <a class="clay-action" href="{{ create_url }}">
                Create game
            </a>
            <a class="clay-action clay-action-secondary"
               href="{{ series_url }}">
                Manage series
            </a>
            <a class="clay-action clay-action-secondary"
               href="{{ create_card_url }}">
                Create card
            </a>
        </div>
    </header>

    {% if length(games) == 0 %}
    <div class="empty-panel">
        <h2>No games defined</h2>
        <p>Loose cards can still be created without a game definition.</p>
    </div>
    {% else %}
    <ul class="game-admin-grid">
        {% for game in games %}
        <li class="game-admin-card">
            <header>
                <div class="clay-icon clay-icon-violet" aria-hidden="true">
                    {{ game.initial }}
                </div>
                <div>
                    <p class="eyebrow">{{ game.short_name }}</p>
                    <h2>{{ game.display_name }}</h2>
                    {% if game.internal %}
                    <span class="internal-badge">Internal</span>
                    {% endif %}
                </div>
            </header>
            {% if game.has_description %}
            <div class="game-description description-copy">
                {{ game.description }}
            </div>
            {% endif %}
            <div class="management-actions">
                <a class="clay-action clay-action-secondary"
                   href="{{ game.edit_url }}">Edit game</a>
            </div>
            <div class="game-field-heading">
                <strong>Card fields</strong>
                <span>{{ game.field_count }}</span>
            </div>
            {% if length(game.fields) == 0 %}
            <p class="muted-copy">Uses standard card fields.</p>
            {% else %}
            <ul class="game-field-list">
                {% for field in game.fields %}
                <li>
                    <span>
                        <strong>{{ field.label }}</strong>
                        <small>{{ field.key }}</small>
                    </span>
                    <span class="field-type">{{ field.input_type }}</span>
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
    {% endif %}
</section>
{% endblock %}