{% extends '00_bases/base-edit-seance.html.twig' %}

{% block title %}Keep'IT Training - Séance {{seance.date|date('d M') }}{% endblock %}
{% block stimulusModifier %} {{stimulus_controller('planning--editGeneralitesSeance')}} {% endblock %}

{% block shead %}

    <style>
    
        :root {
            --seance-color: {{seance.typeEvenement.famille.couleur}}
        }

    </style>

    <div class="tgo-seance__head oka-appWrap">

        <div class="tgo-seance__headLeft">
            <h4 class="-crop">Éditer séance {{ seance.numero }}</h4>
        </div>

        <div class="tgo-seance__headCenter">
            
            <a class="tgo-tab_button -generalites">
                <div class="tgo-tab_button__lbl">GÉNÉRALITÉS</div>
            </a>

            <div class="oka-spacer -inline"></div>

            <a class="tgo-tab_button" href="{{path('seance.edit.exercices', {'id': seance.id} )}}">
                <div class="tgo-tab_button__lbl">EXERCICES</div>
            </a>
        </div>

        <div class="tgo-seance__headRight">
            <a href="{{path('seance.show', {'id': seance.id}) }}" class="oka-bt -outlined">
                {# <span class="oka-bt__lbl">Fermer</span> #}
                <div class="oka-bt__ico"><i class="fa-regular fa-xmark"></i></div>
                <div class="oka-spinner"></div>
            </a>
        </div>
        
    </div>

{% endblock %}


{% block body %}

{{ form_start(formEditSeance, {'attr': {'id': 'formEditGen'}}) }}

        <div class="oka-tab__body tgo-seanceGeneralites__body">
            {% include ('seance/_fragments/tab-editGeneralites.html.twig') %}
        </div>

        <div class="u-displaynone">
            {{ form_row(formEditSeance.save, { 'label': 'Enregistrer' }) }}
        </div>
    
{{ form_end(formEditSeance) }}

    <div class="oka-formFooter">

        <button class="oka-bt" onclick="document.getElementById('edit_seance_save').click()">
            <span class="oka-bt__lbl">Enregistrer</span>
            <span class="oka-spinner"></span>
        </button>

        <a href="{{path('seance.show', {'id': seance.id}) }}" class=" oka-bt  -outlined">
            <div class="oka-bt__lbl">Annuler</div>
            <div class="oka-spinner"></div>
        </a>
        
    </div>



{% endblock %}

{% block modal %}

<!-- modal -->
<div class="oka-modal -sm">
    <!-- Pilot d'affichage du modal -->
    <input type='checkbox' id="display-modal-exit" name="display-modal" class="oka-modal__pilot noVerifForm" onchange="this.checked ? window.location.hash='exit' : window.location.hash=''" />
    <!-- Fond Overlay et pilot de fermeture -->
    <label class="oka-modal__bg "></label>
    <!-- Container -->
    <div id="modal-default" class="oka-modal__ctnr">
        <div class="oka-modal__head oka-head">

            <div class="oka-head__title">
                <div class="oka-UI-h -sm">
                    Changements non sauvegardés
                </div>
            </div>

            <label class="oka-head__action oka-bt oka-bt--rounded oka-bt--ghost "  for="display-modal-exit">
                <span class="oka-bt__lbl">Fermer</span>
                <span class="oka-bt__ico">✕</span>
            </label>
        </div>
        <div class="oka-modal__body oka-wrap oka-wrap--md">

            <div class="oka-data -lg">Vous avez des changements non sauvegardés. Êtes-vous sûr de vouloir quitter cette page ?</div>

        </div>
        <div class="oka-modal__footer">
            <label for="display-modal-exit" class="oka-bt oka-bt--outlined modal-close">
                <span class="oka-bt__lbl">Annuler</span>
                <span class="oka-bt__spinner"></span>
            </label>
            <a class="oka-bt oka-bt--primary" id="leaveBtn" onclick='this.classList.add("js-ajaxInProgress")'>
                <span class="oka-bt__lbl">Quitter</span>
                <span class="oka-bt__spinner"></span>
            </a>
        </div>
    </div>
</div>

{% endblock %}