{% extends "layout.html" %}

{% block content %}
<section class="game-editor" aria-labelledby="GameFormHeading">
    <a class="back-link" href="{{ back_url }}">← All games</a>
    <header class="page-heading">
        <div>
            <p class="eyebrow">Game administration</p>
            <h1 id="GameFormHeading">{{ heading }}</h1>
            {% if visibility_internal %}
            <span class="internal-badge">Internal</span>
            {% endif %}
        </div>
        {% if mode == "edit" %}
        <div class="management-actions">
            <a class="clay-action clay-action-secondary"
               href="{{ add_field_url }}">Add field</a>
            <a class="clay-action clay-action-danger"
               href="{{ delete_url }}">Delete game</a>
        </div>
        {% endif %}
    </header>

    {% if has_errors %}
    <div class="error-summary" role="alert" tabindex="-1">
        <h2>Check the game details</h2>
        <p><a href="#{{ error_control_id }}">{{ error_message }}</a></p>
    </div>
    {% endif %}

    <form class="standalone-form clay-form-panel" method="post"
          action="{{ action_url }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        {% if mode == "edit" %}
        <input type="hidden" name="game_revision"
               value="{{ game_revision }}">
        {% endif %}
        <label class="form-field" for="GameShortName">
            <span>Short name</span>
            <input id="GameShortName"
                   {% if mode == "create" %}name="short_name"{% endif %}
                   type="text" value="{{ short_name }}"
                   pattern="[a-z0-9]+" required
                   {% if error_field == "short_name" %}
                   aria-invalid="true"
                   aria-describedby="GameShortNameError"
                   {% endif %}
                   {% if mode == "edit" %}readonly{% endif %}>
            <small>Permanent lowercase prefix used in card IDs.</small>
            {% if error_field == "short_name" %}
            <small id="GameShortNameError" class="field-error">
                {{ error_message }}
            </small>
            {% endif %}
        </label>
        <label class="form-field" for="GameDisplayName">
            <span>Display name</span>
            <input id="GameDisplayName" name="display_name" type="text"
                   value="{{ display_name }}" required
                   {% if error_field == "display_name" %}
                   aria-invalid="true"
                   aria-describedby="GameDisplayNameError"
                   {% endif %}>
            {% if error_field == "display_name" %}
            <small id="GameDisplayNameError" class="field-error">
                {{ error_message }}
            </small>
            {% endif %}
        </label>
        <label class="form-field" for="GameDescription">
            <span>Description <em>Optional</em></span>
            <textarea id="GameDescription" name="description"
                      rows="7"
                      {% if error_field == "description" %}
                      aria-invalid="true"
                      aria-describedby="GameDescriptionError"
                      {% endif %}>{{ description }}</textarea>
            {% if error_field == "description" %}
            <small id="GameDescriptionError" class="field-error">
                {{ error_message }}
            </small>
            {% endif %}
        </label>
        <p class="form-hint">Descriptions support Markdown.</p>
        <fieldset class="visibility-options">
            <legend>Visibility</legend>
            <label class="visibility-option">
                <input name="visibility" type="radio" value="PUBLIC"
                       {% if visibility_public %}checked{% endif %} required>
                <span>
                    <strong>Public</strong>
                    <small>Available through normal card workflows.</small>
                </span>
            </label>
            <label class="visibility-option">
                <input name="visibility" type="radio" value="INTERNAL"
                       {% if visibility_internal %}checked{% endif %}>
                <span>
                    <strong>Internal</strong>
                    <small>
                        Only the administrator can see this game and its
                        cards.
                    </small>
                </span>
            </label>
        </fieldset>
        <button class="form-submit" type="submit">{{ submit_label }}</button>
    </form>

    {% if mode == "edit" %}
    <section class="definition-panel" aria-labelledby="FieldsHeading">
        <div class="section-heading">
            <div>
                <p class="eyebrow">Card details</p>
                <h2 id="FieldsHeading">Custom fields</h2>
            </div>
            <a class="clay-action" href="{{ add_field_url }}">Add field</a>
        </div>
        {% if length(fields) == 0 %}
        <div class="empty-panel">
            <h2>Uses standard card fields</h2>
            <p>Add a custom field when this game needs extra card details.</p>
        </div>
        {% else %}
        <ul class="definition-list">
            {% for field in fields %}
            <li>
                <div class="definition-copy">
                    <p class="eyebrow">{{ field.type }}</p>
                    <h3>{{ field.label }}</h3>
                    <p><code>{{ field.key }}</code>
                       {% if field.choice_count > 0 %}
                       · {{ field.choice_count }} choices
                       {% endif %}</p>
                </div>
                <div class="definition-actions">
                    <form method="post" action="{{ field_order_url }}">
                        <input type="hidden" name="csrf_token"
                               value="{{ csrf_token }}">
                        <input type="hidden" name="game_revision"
                               value="{{ game_revision }}">
                        {% for id in field.up_order %}
                        <input type="hidden" name="field_id" value="{{ id }}">
                        {% endfor %}
                        <button class="clay-action clay-action-secondary"
                                type="submit" {% if field.is_first %}disabled{% endif %}>
                            Move up
                        </button>
                    </form>
                    <form method="post" action="{{ field_order_url }}">
                        <input type="hidden" name="csrf_token"
                               value="{{ csrf_token }}">
                        <input type="hidden" name="game_revision"
                               value="{{ game_revision }}">
                        {% for id in field.down_order %}
                        <input type="hidden" name="field_id" value="{{ id }}">
                        {% endfor %}
                        <button class="clay-action clay-action-secondary"
                                type="submit" {% if field.is_last %}disabled{% endif %}>
                            Move down
                        </button>
                    </form>
                    <a class="clay-action clay-action-secondary"
                       href="{{ field.edit_url }}">Edit field</a>
                    <a class="clay-action clay-action-danger"
                       href="{{ field.delete_url }}">Delete</a>
                </div>
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </section>
    {% endif %}
</section>
{% endblock %}