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

{% block bodyClass %}tgo-body--section{% endblock %}

{% block base %}

    <div id="root" class="layout-app">

        <header class="tgo-head layout-app__header ">
            <div class="tgo-head_row -first">
                <div class="oka-app-wrap">
                    {# Logo KeepIt #}
                    <div class="tgo-head_logo tgo-logo">
                        {% include("00_commons/logo.html.twig") %}
                        <div class="tgo-logo_type">
                            <div class="tgo-logo_name">KEEP'IT</div> 
                            <div class="tgo-logo_base">Training</div>
                        </div>
                    </div>
                    <div class="oka-divider -vrt -low" ></div>
                    
                    {#  Club #}
                    {% include("00_commons/selectClub.html.twig") %}
                   
                    
                    {# Navigation Globale #}
                    <div class="tgo-head_nav">
                        <a href="{{path('home')}}" class="oka-bt -outlined {{ 'planning.saison.club.show' in route ? '-active' }}">
                            <div class="oka-bt__lbl">Planning</div>
                            <div class="oka-spinner"></div>
                        </a>
                        {# <a href="{{path("seance.list")}}" class="oka-bt -outlined {{ 'seance.list' in route ? '-active' }}">
                            <div class="oka-bt__lbl"><strike>Séances</strike></div>
                            <div class="oka-spinner"></div>
                        </a> 
                        #}
                        {# <a href="#" class="oka-bt -outlined {{ 'seance.list' in route ? '-active' }}">
                            <div class="oka-bt__lbl"><strike>Séances</strike></div>
                            <div class="oka-spinner"></div>
                        </a> #}

                        <a href="{{path("exercice.list")}}" class="oka-bt -outlined {{ 'exercice' in route ? '-active' }}">
                            <div class="oka-bt__lbl">Exercices</div>
                            <div class="oka-spinner"></div>
                        </a>
                        <div class="oka-divider -vrt -low" ></div>
                        

                        
                        <div class="tgo-head_user">
                            {# <div class="oka-data -crop">Utilisateur</div> #}

                            <input type="checkbox" class="oka-dropdown__ctrl" id="dropdown-user" />
                            <div class="oka-dropdown">
                                <label class="oka-dropdown__bt oka-bt  -ghost" for="dropdown-user" >
                                    <div class="oka-bt__lbl">{{ app.user.firstname }} {{ app.user.lastname }}</div>
                                    <div class="oka-bt__ico"><i class="fa-solid fa-caret-down"></i></div>
                                    <div class="oka-spinner"></div>
                                </label>
                                <label for="dropdown-user" class="oka-dropdown__overlay"></label>
                                <div class="oka-dropdown__ctnr">
                                    <div class="oka-navgroup -vrt">

                                        {# Toogle DARK/LIGHT MODE #}
                                        <button onClick="document.body.classList.toggle('oka-darkMode');  setCookieMode()" class="oka-nav -ghost" >
                                            <div class="oka-nav__ico">
                                                <span  class="u-showOnDark"><i class="fa-regular fa-sun-bright"></i></span>
                                                <span class="u-showOnLight"><i class="fa-solid fa-moon"></i></span>
                                            </div>
                                            
                                            <div class="oka-nav__lbl">
                                                <span class="u-showOnDark">Affichage : clair</span>
                                                <span class="u-showOnLight">Affichage : sombre</span>
                                            </div>

                                        </button> 

                                        <button id="modeVideo" data-url="{{ path('changeMode') }}"  data-value="{{ mode.get }}" class="oka-nav -ghost" {{ stimulus_action("parameter", "changeMode", "click") }} {{ stimulus_controller("parameter", {mode: mode.get, ip: ipLocal.get}) }}>
                                             <div class="oka-nav__ico">
                                                <span class=""><i class="fa-solid fa-file-video"></i></span>
                                            </div>
                                            <div class="oka-nav__lbl">
                                                <span id="modeVideoLibelle" class="u-libelle">{{ mode.get == "public" ? "Accès Extérieur" : "Accès Maison" }} </span>
                                            </div>
                                        </button>

                                        <a href="{{ path('app_logout') }}" class="oka-nav -ghost">
                                             <div class="oka-nav__ico">
                                                <span class=""><i class="fa-solid fa-right-from-bracket"></i></span>
                                            </div>
                                            <div class="oka-nav__lbl">
                                                <span class="u-libelle">Déconnexion</span>
                                            </div>
                                        </a>
                                        
                                      

                                    </div>    
                                </div>
                            </div>

                        </div>



                        <!-- DROPDOWN PARAMETRES -->
                        <input type="checkbox" class="oka-dropdown__ctrl" id="dropdown-params" />
                        <div class="oka-dropdown">
                            <label class="oka-dropdown__bt oka-bt  -ghost" for="dropdown-params" >
                                <div class="oka-bt__ico"><i class="fa-regular fa-gear"></i></div>
                                <div class="oka-spinner"></div>
                            </label>
                            <label for="dropdown-params" class="oka-dropdown__overlay"></label>
                            <div class="oka-dropdown__ctnr">
                                <div class="oka-navgroup -vrt">
                                    <a href="{{ path('parametrage.materiel.list') }}" class="oka-nav {{ 'materiel' in route ? '-active' }}">
                                        <span class="oka-nav__lbl">Liste du matériel</span>
                                    </a>
                                    <a href="{{ path('parametrage.tag.list') }}" class="oka-nav {{ 'tag' in route ? '-active' }}">
                                        <span class="oka-nav__lbl">Liste des tags</span>
                                    </a>
                                    <a href="{{ path('parametrage.classification.list') }}" class="oka-nav {{ 'classification' in route ? '-active' }}">
                                        <span class="oka-nav__lbl">Classification des exercices</span>
                                    </a>
                                    <a href="{{ path('parametrage.club.list') }}" class="oka-nav {{ 'parametrage.club.list' in route ? '-active' }}">
                                        <span class="oka-nav__lbl">Liste des clubs</span>
                                    </a>
                                  
                                    </a>
                                </div>    
                            </div>
                        </div>

                        

                        <div class="oka-divider -vrt -low" ></div>


                    </div>
                </div>
            </div>

            {% block shead %}{% endblock %}

        </header>


        <div class="layout-app__body" style="z-index: 1">
            
            <main class="layout-app__main">
                <div class="oka-app-wrap">
                    {% block body %}{% endblock %}
                </div>
            </main> 
            
            <footer class="layout-app__footer">
                {% include '00_commons/credits.html.twig' %}
            </footer>

           
        </div>  

    </div>

    
{% endblock %}