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

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

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

{% endblock %}

{% block body %}


{# si l'utilisateur fais un filtrage, on enleve tout apres "edit" dans l'url pour mettre l'url dans le dataset pour faire fonctionner le js correctement #}
{% set url_parts = url | split('?') %}
{% set base_url = url_parts[0] %}
<div id="divForData" data-url={{ base_url }} data-idSeance={{ idSeance }} style="direction: rtl;float:left;width:70%;;height:100vh;overflow:auto">
    <div style="direction: ltr;position: sticky;top: 0;z-index: 10;">
        <header class="tgo-head ">
            {# <div class="tgo-head_row -first"> #}
                <div class="tgo-editSeance__head -exercices">
                    
                    <div class="tgo-editSeance__headLeft">
                        <h4 class="-crop">Éditer séance {{ seance.numero }}</h4>
                    </div>

                    <div class="tgo-editSeance__headCenter">
        
                        <a class="tgo-tab_button" href="{{path('seance.edit.generalites', {'id': seance.id} )}}">
                            <div class="tgo-tab_button__lbl">GÉNÉRALITÉS</div>
                        </a>

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

                        <a class="tgo-tab_button -exercices">
                            <div class="tgo-tab_button__lbl">EXERCICES</div>
                        </a>
                    </div>

                    <div class="tgo-time tgo-editSeanceExo__totalTime">
                    
                        <i class="fa-regular fa-stopwatch tgo-time__ico"></i>
                        <span class="tgo-time__lbl">TOTAL</span>
                        <span id="dureeSeanceExercices" class="tgo-time__data"></span>
                        
                    </div>

                    <div class="tgo-editSeance__headRight">
                        <a href="{{path('seance.show', {'id': seance.id}) }}" class="oka-bt -outlined">
                            <div class="oka-bt__ico"><i class="fa-regular fa-xmark"></i></div>
                            <div class="oka-spinner"></div>
                        </a>
                    </div>
        
                </div>
            {# </div> #}
        </header>
    </div>
    
    <div style="direction: ltr;">
        <div class="oka-tab__body" >

            <div style="padding: 1rem 2rem 0;">
                <div class="oka-message -info">
                    <div class="oka-message__ico" style="margin-top: 0.2rem;"><i class="fa-solid fa-circle-info"></i></div>
                    <div class="oka-message__lbl">
                        Toutes les modifications réalisées sur cette page seront sauvegardées automatiquement.
                    </div>
                    <button class="oka-bt -sm -ghost -rounded -info" onclick="this.parentNode.remove();">✕</button>
                </div>
            </div>



            {% include ('seance/_fragments/tab-editExercices.html.twig') %}  
        </div>
    </div>
</div>


<style>
    .clone{
        /*outline : 3px solid red;*/

    }

    .tgo-editSeance__annexes {
        float: right;
        width: 30%;
        height: 100vh;
        overflow-y: auto;
        padding: 1rem 1rem 3rem 1rem;
       /* background: #000;*/
        background-color: var(--oka-color-app-bg-header);

        border-left: 1px solid var(--oka-color-system-contrast-low);
    }

    .tgo-editSeance__annexes .grid-160 {
        grid-column-gap: 0.5rem;
        grid-row-gap: 0.5rem;
    }

    .tgo-editSeance__annexes .oka-flip {
        height:100%;
    }
    .tgo-editSeance__annexes .oka-card__link:hover {
        cursor:move !important;
    }

    .tgo-editSeance__annexes .oka-card__head {
        padding:0.5rem;
    }


    {# .tgo-seance__exos {
        padding : 2rem 0;
        border-bottom : 1px solid var(--oka-color-system-contrast-low);

    } #}

    /* DROPZONE */
    .tgo-drop:empty {
        
        border: 2px dotted white;
        border-radius : 1rem;
        background: #000;
    }


</style>

<div class="tgo-editSeance__annexes -forceFiltersRow global tgo-undrop" id="listExercices" data-controller="exercice--listExercice" {% if classificationParent is defined %}data-niveau0="{{classificationParent.id}}"{% endif %}>
    {{ renderlist(list) }}
</div>

<style>

    .-noEvent {
        touch-action: none;
        user-select: none;
    }

    .tgo-drop {
        /*width: 5rem;*/
        height: 15rem;
        max-height: 20rem;
        border: 1px dotted white;
    }

</style>

{% endblock %}


{% block aside %}



{% endblock %}