{% extends "layout.html" %}

{% block content %}
<section class="page-shell form-page" aria-labelledby="FieldFormHeading">
    <a class="back-link" href="{{ back_url }}">← {{ game_name }}</a>
    <p class="eyebrow">Game administration</p>
    <h1 id="FieldFormHeading">{{ heading }}</h1>

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

    <form id="GameFieldForm" class="standalone-form" method="post"
          action="{{ action_url }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <input type="hidden" name="game_revision"
               value="{{ game_revision }}">
        <label class="form-field" for="FieldKey">
            <span>Key</span>
            <input id="FieldKey" {% if mode == "create" %}name="key"{% endif %}
                   type="text" value="{{ key }}"
                   pattern="[a-z][a-z0-9_]*" required
                   {% if error_field == "key" %}
                   aria-invalid="true" aria-describedby="FieldKeyError"
                   {% endif %}
                   {% if mode == "edit" %}readonly{% endif %}>
            <small>Permanent form and storage identity.</small>
            {% if error_field == "key" %}
            <small id="FieldKeyError" class="field-error">
                {{ error_message }}
            </small>
            {% endif %}
        </label>
        <label class="form-field" for="FieldLabel">
            <span>Label</span>
            <input id="FieldLabel" name="label" type="text"
                   value="{{ label }}" required
                   {% if error_field == "label" %}
                   aria-invalid="true" aria-describedby="FieldLabelError"
                   {% endif %}>
            {% if error_field == "label" %}
            <small id="FieldLabelError" class="field-error">
                {{ error_message }}
            </small>
            {% endif %}
        </label>
        <label class="form-field" for="FieldType">
            <span>Type</span>
            {% if mode == "create" %}
            <select id="FieldType" name="type"
                    {% if error_field == "type" %}
                    aria-invalid="true" aria-describedby="FieldTypeError"
                    {% endif %}>
                <option value="INTEGER"
                        {% if field_type == "INTEGER" %}selected{% endif %}>
                    Integer
                </option>
                <option value="STRING"
                        {% if field_type == "STRING" %}selected{% endif %}>
                    String
                </option>
                <option value="CHOICE"
                        {% if field_type == "CHOICE" %}selected{% endif %}>
                    Choice
                </option>
            </select>
            {% else %}
            <input id="FieldType" type="text" value="{{ field_type }}"
                   readonly data-field-type="{{ field_type }}">
            {% endif %}
            {% if error_field == "type" %}
            <small id="FieldTypeError" class="field-error">
                {{ error_message }}
            </small>
            {% endif %}
        </label>

        <fieldset id="ChoiceEditor" class="form-section"
                  {% if error_field == "choice" %}
                  aria-invalid="true" aria-describedby="ChoiceEditorError"
                  {% endif %}
                  {% if field_type != "CHOICE" %}hidden{% endif %}>
            <legend>Choices</legend>
            <p class="form-hint">
                Values match exactly. Existing values are permanent while
                cards use them.
            </p>
            <div id="ChoiceRows" class="choice-rows">
                {% for choice in choices %}
                <div class="choice-row">
                    <input name="choice" type="text"
                           value="{{ choice.value }}"
                           {% if choice.existing %}readonly{% endif %} required>
                    <button class="clay-action clay-action-secondary move-up"
                            type="button">Move up</button>
                    <button class="clay-action clay-action-secondary move-down"
                            type="button">Move down</button>
                    <button class="clay-action clay-action-danger remove-choice"
                            type="button">Remove</button>
                </div>
                {% endfor %}
            </div>
            <button id="AddChoice" class="clay-action clay-action-secondary"
                    type="button">Add choice</button>
            {% if error_field == "choice" %}
            <p id="ChoiceEditorError" class="field-error">
                {{ error_message }}
            </p>
            {% endif %}
        </fieldset>

        <button class="form-submit" type="submit">{{ submit_label }}</button>
    </form>
    {% if mode == "edit" %}
    <div class="management-actions form-tail-actions">
        <a class="clay-action clay-action-danger"
           href="{{ delete_url }}">Delete field</a>
    </div>
    {% endif %}
</section>
{% endblock %}

{% block scripts %}
<script src="{{ url_for("static", "game_field_form.js") }}"></script>
{% endblock %}