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

{% block title %}Modifier un exercice{% endblock %}

{% block titre_page %}Modifier un exercice{% endblock %}
{% block resume_page %}Cela permet de tracer les différentes interventions qui ont été faites dans la troupe{% endblock %}
{% block description_page %}Pour modifier :
    <ul>
        <li>Choisir un nom, type et description de l'exercice</li>
        <li>Choisir le nombre de joueur, une durée moyenne et une photo représentative de l'exercice</li>
    </ul>
{% endblock %}

{% block body %}
    <div class="col-md-12 mb-3">
        <div class="card">
            <div class="card-body">
                {{ form_start(form, {'action': path('exercise_edit', {'idExercise':exercise.id}), 'attr': {'class': 'row g-3'}}) }}
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-xs-12">
                            {{ form_label(form.name, 'Nom de l\'exercice', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
                        </div>
                        <div class="col-xs-12 mt-3">
                            {{ form_label(form.type, 'Type d\'exercice', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.type, {'attr': {'class': 'form-select'}}) }}
                        </div>
                        <div class="col-xs-12 mt-3">
                            {{ form_label(form.description, 'Description', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.description, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="col-xs-12">
                        {{ form_label(form.photo, 'Photo représentative', {'attr': {'class': 'form-label'}}) }}
                        {{ form_widget(form.photo, {'attr': {'class': 'form-control'}}) }}
                    </div>
                    <div class="col-md-12 row">
                        <div class="col-md-6 mt-3">
                            {{ form_label(form.nbJoueursMin, 'Nbre de joueur min.', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.nbJoueursMin, {'attr': {'class': 'form-control'}}) }}
                        </div>
                        <div class="col-md-6 mt-3">
                            {{ form_label(form.nbJoueursMax, 'Nbre de joueur max.', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.nbJoueursMax, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="col-md-12 mt-3">
                        {{ form_label(form.duration, 'Temps (en minute)', {'attr': {'class': 'form-label'}}) }}
                        {{ form_widget(form.duration, {'attr': {'class': 'form-control'}}) }}
                    </div>
                </div>


                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        // Date format options
        const dateFormatOption = {weekday: "long", year: "numeric", month: "long", day: "numeric"};

        const mdPicker_DatePortrait = new mdDateTimePicker.default({
            type: "date",
            orientation: "PORTRAIT",
            past: moment().subtract(2, 'years'),
            future: moment().subtract(-3, 'years')
        });
        const mdPicker_DatePortraitInput = document.querySelector("#cours_date");

        // Dispatch input event
        mdPicker_DatePortrait.trigger = mdPicker_DatePortraitInput;

        // Text input events
        mdPicker_DatePortraitInput.addEventListener("focus", () => mdPicker_DatePortrait.toggle());
        mdPicker_DatePortraitInput.addEventListener("onOk", () => mdPicker_DatePortraitInput.value = new Date(mdPicker_DatePortrait.time.toString()).toLocaleDateString([], 'dd/MM/YYYY'));
    </script>
{% endblock %}