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

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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
{% 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-appWrap {% block headModifier %}{% endblock %}">
                    {# 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>
                    {# Logo Club #}
                    
                    {% include("00_commons/club.html.twig") %}
                    
                    {# Navigation Globale #}
                    <div class="tgo-head_nav">
                        {# <a href="{{path('exercice.classification.show', {'classificationId': classificationId, 'id' : exercice.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>

            {% block shead %}{% endblock %}

        </header>


        <div class="layout-app__body" {% block stimulusModifier %}{% endblock %}>
            
            <main class="layout-app__main">
                <div class="oka-appWrap {% block bodyModifier %}{% endblock %}">
                    {% block body %}{% endblock %}
                </div>
            </main> 
            
            {# <footer class="layout-app__footer">
                <button onClick="document.body.classList.toggle('oka-darkMode')" class="oka-bt -ghost" >
        
                    <div class="oka-bt__ico u-showOnDark"><i class="fa-regular fa-sun-bright"></i></div>
                    <div class="oka-bt__ico u-showOnLight"><i class="fa-solid fa-moon"></i></div>
                </button>

            </footer>  #}
        </div>  

    </div>
{% endblock %}