{% extends "base.html" %}
{% load static %}
{% load tags %}

{% block scripts %}
<script src="{% static 'js/game_mode_config.js' %}"></script>
<script text="text/javascript">
    const SECTION_NAME = "{{current_section_name}}";
    const GAME_MODE_ID = "{{game_mode_id}}";
</script>
{% endblock %}

{% block top-buttons %}
    <a id="back" href="{% url 'Manage game modes' %}"><i class="bi bi-arrow-90deg-left"></i></a>
{% endblock %}

{% block main %}
<div id="config-forms">
    <div id="config-form-left">
        <form id="doc-meta-form" data-id="doc-meta">
            {% include 'elements/el_form_fields.html' with fields=doc_metadata_form.visible_fields protected=False %}
        </form>
        <div id="config-form-icons">
            {% for section_name, section in sections.items %}
            <a href="{{request.path|url_trim:2}}{{ section_name }}/" class="icon-container{% if section_name == current_section_name %} selected{% endif %}{% if section.config_class.validation.passed %} complete{% endif %}" data-section="{{section_name}}">
                <div id="{{ section_name }}-icon" class="icon" data-form="#{{ section_name }}-config-form">
                    <i class="bi {{ section.icon }}"></i>
                </div>
                <p>{{ section_name|format_text }}</p>
            </a>
            {% endfor %}
        </div>
    </div>
    <div id="{{current_section_name}}-config-form-container" class="form-container">
        <div id="subsection-forms" class="border-bottom">
            {% for form in section.forms %}
                <form id="config-form-{{ forloop.counter0 }}" class="config-form tier-{{form.tier}}{% if form.config_class.validation.fail_reasons %} erroneous{% endif %}" data-id="{{forloop.counter0}}">
                    <div class="title-container">
                        <p class="title">{{ form.name|format_text }}</p>
                        {% csrf_token %}
                        {% if form.config_class.validation.fail_reasons %}
                            <ul class="error-list">
                                {% for error in form.config_class.validation.fail_reasons %}
                                    <li>{{ error|escape }}</li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </div>
                    {% include 'elements/el_form_fields.html' with fields=form.visible_fields protected=protected %}
                </form>
            {% endfor %}
        </div>
        <form id="section-controls" action="" method="post">
            {% csrf_token %}
            {% if last %}
                <button id="next-section" type="submit" class="btn btn-primary" data-cy="finish-game-mode-button">Finish</button>
            {% else %}
                <button id="next-section" type="submit" class="btn btn-primary" data-cy="next-game-mode-button">Next</button>
                <button id="save-game-mode" type="button" class="btn btn-primary" data-cy="save-game-mode-button">Save</button>
            {% endif %}
        </form>
    </div>
</div>
{% endblock %}

{% block style %}
<style>


    /* specific elements */
    #main{
        padding: var(--padding);
    }
    #game-modes-return{
        font-size: 1.5rem;
    }
    #config-forms{
        height: calc(100% - var(--padding));
        display: flex;
        flex-direction: row;
    }
    #config-form-left{
        display: flex;
        flex-direction: column;
        margin-right: var(--padding);
        padding-bottom: var(--padding);
    }
    #config-form-icons{
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        margin-left: 30px;
        color: var(--text-light);
        margin-bottom: var(--padding);
    }
    #config-form-icons::before{
        content: '';
        position: absolute;
        left: 0;
        top: 5%;
        display: block;
        height: 90%;
        border-left: 2px solid var(--text-light);
    }
    #subsection-forms{
        position: relative;
        flex: 1;
        min-height: 0;
        max-height: calc(100% - 50px);
        width: 1000px;
        padding-right: calc(2* var(--increment));
        overflow-y: auto;
    }
    #section-controls{
        display: flex;
        flex-direction: row;
        width: 1000px;
        margin: 0;
    }

    /* config icons */
    #config-form-icons .icon{
        margin-left: 0;
        box-shadow: 0 0 0 var(--increment) var(--mid);
        transform: translate(-75%,0%);
    }
    #config-form-icons .icon-container.complete>.icon{
        border: 2px solid var(--primary);
    }
    #config-form-icons>.icon-container{
        width: 280px;
        display: flex;
        align-items: center;
        flex-direction: row;
        margin-top: calc(var(--increment)*2);
        margin-bottom: calc(var(--increment)*2);
        text-decoration: none;
    }
    #config-form-icons>.icon-container:hover{
        color: var(--text-mid);
    }
    #config-form-icons>.icon-container:hover .icon,#config-form-icons>.icon-container:hover p,.icon-container.selected .icon, .icon-container.selected p{
        color: var(--primary-light);
    }
    #config-form-icons>.icon-container p{
        font-size: 1.25rem;
        margin: 0;
    }

    .next-form{
        width: 100%;
    }

    .selector{
        width: 100%;
        border: none;
        border-bottom: 1px solid #888;
        background: transparent;
        text-align: left;
        margin-bottom: 5px;
    }
    .selector:hover{
        background-color: aliceblue;
    }

</style>
{% endblock %}
