{% extends 'base.html.twig' %}

{% set optFields = [] %}
{% for opt in form.mods_optionnels %}
    {% set optFields = optFields|merge([opt]) %}
{% endfor %}

{% block title %}Administration{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('styles/globals/bulles.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.min.css">
    <link rel="stylesheet" href="{{ asset('styles/globals/form.css') }}">
{% endblock %}

{% block titlePage %}
    <div class="bulle-container">
        <div class="bulle bulle-all-col bulle-nohover bulle-header">
            <h1 class="bulle-title">Administration : Mods</h1>
        </div>
    </div>
{% endblock %}

{% block main %}
    <div class="bulle-container">
        {{ form_start(form, { attr: { class: 'bulle bulle-all-col form-wrapper' } }) }}

            <div class="form-group">
                {{ form_label(form.version, "", { label_attr: { class: 'form-label' } }) }}
                {{ form_widget(form.version, { attr: { class: 'form-input' } }) }}
                {{ form_errors(form.version) }}
            </div>

            <div class="form-group">
                <label class="form-toggle">
                    {{ form_widget(form.downloadable) }}
                    <span class="form-toggle__track"></span>
                    <span class="form-toggle__label {% if form.downloadable.vars.disabled %}disabled{% endif %}">Téléchargeable</span>
                </label>
                {{ form_errors(form.downloadable) }}
            </div>

            <div class="form-group">
                {{ form_label(form.mods, "", { label_attr: { class: 'form-label' } }) }}
                <div class="form-checkbox-group"
                    data-controller="mod-optional">

                    {% for mod in form.mods %}

                        <div class="form-wrapper__row {% if not loop.last %}form-wrapper__row-line{% endif %}"
                             data-mod-optional-target="row">

                            <label class="form-checkbox-group-item">
                                {{ form_widget(mod, { attr: {
                                    'data-mod-checkbox': '',
                                    'data-action': 'change->mod-optional#toggle'
                                }}) }}
                                <span>{{ form_label(mod) }}</span>
                            </label>

                            <label class="form-toggle d-none"
                                   data-opt-toggle>
                                {{ form_widget(optFields[loop.index0], { attr: { 'data-ui-opt': '' } }) }}
                                <span class="form-toggle__track"></span>
                                <span class="form-toggle__label">Optionnel</span>
                            </label>

                        </div>
                    {% endfor %}

                </div>
                {{ form_errors(form.mods) }}
            </div>

        <div class="form-wrapper__footer">
            <a href="{{ path('app_admin_modpacks') }}" class="form-btn form-btn--cancel">Annuler</a>
            <button type="submit" class="form-btn">Enregistrer</button>
        </div>
        {{ form_end(form) }}
    </div>
{% endblock %}