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

{% block title %} Modpack {% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('styles/vitrine/index.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/globals/bulles.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/globals/form.css') }}">
{% endblock %}

{% block main %}
    <div class="bulle-container">
        <section class="bulle bulle-all-col flex-column align-items-center">
            <h1 class="text-center">Télécharger notre Modpack</h1>
            <div class="form-group">
                <label class="form-label" for="version-select">Version</label>
                <select id="version-select"
                        class="form-input form-select"
                        data-controller="modpack-download"
                        data-action="change->modpack-download#changeVersion">
                    {% for mp in modpacks %}
                        <option value="{{ mp.id }}" {{ mp.id == modpack.id ? 'selected' : '' }}>
                            {{ mp.version }}
                        </option>
                    {% endfor %}
                </select>
            </div>
        </section>

        {{ form_start(form, {
            'attr': {
                class: 'bulle bulle-all-col form-wrapper',
                'data-controller': 'modpack-download',
                'data-modpack-download-url-value': path('app_modpack_download', {'id': modpack.id}),
                'data-action': 'submit->modpack-download#submit'
            }
        }) }}
        <div class="form-group">
            {{ form_label(form.mods_optionnels, "", { label_attr: { class: 'form-label' } }) }}
            <div class="form-checkbox-group">
                {% for mod in form.mods_optionnels %}
                    <label class="form-checkbox-group-item">
                        {{ form_widget(mod) }}
                        <span>{{ form_label(mod) }}</span>
                    </label>
                {% endfor %}
            </div>
            {{ form_errors(form.mods_optionnels) }}
        </div>

        <div class="form-wrapper__footer">
            <button type="submit" class="form-btn">Télécharger</button>
        </div>
        {{ form_end(form) }}
    </div>
{% endblock %}