{% extends 'base.html.twig' %}
{% block title %}Détail de la team{% endblock %}
{% block meta_description %}
    Fiche détaillée de la team
{% endblock %}

{% block body %}

    <header class="gameHeader" style="background: url('{{ asset('img/games/banner/' ~ gameFrom.banner ) }}' )">

        <a id="gameHeaderTitle" class="gameHeaderTitle" style="border-bottom: 5px solid {{ gameFrom.color }}; opacity:0;" href="{{ path('app_game',{'slug':gameFrom.slug}) }}">{{ gameFrom.title }}</a>

        <div style="display:inline-flex;">
            <a href="{{ path('app_home') }}"><img src="{{ asset('img/games/headerSiteLogo/' ~ gameFrom.siteLogo) }}" class="logoPng" id="logoPng" alt='bearded dwarf forging a sword above "SquadForge" title' /></a>
            <a id="logoShrinkTxt" href="{{ path('app_home') }}">SQUADFORGE</a>
        </div>

        <nav id="navLine" class="navLine">
            <span id="closeBurgerMobile"><i class="fa-solid fa-xmark"></i></span>
            <a href="{{ path('app_home') }}" class="homeNav" onmouseover="this.style.borderTop = '2px solid {{ gameFrom.color }}'; this.style.color = '{{ gameFrom.color }}';" onmouseout="this.style.borderTop = '2px solid rgba(0,0,0,0)'; this.style.color = 'white';"><i class="fa-solid fa-house"></i></a>
            <a href="{{ path('app_games') }}" class="gamesNav caps" onmouseover="this.style.borderTop = '2px solid {{ gameFrom.color }}'; this.style.color = '{{ gameFrom.color }}';" onmouseout="this.style.borderTop = '2px solid rgba(0,0,0,0)'; this.style.color = 'white';">jeux</a>
            {% if app.user %}
                <a href="{{ path('app_userGroups') }}" class="teamsNav caps navActive" style="background-color: {{ gameFrom.color }}" onmouseover="this.style.borderTop = '2px solid {{ gameFrom.color }}'; this.style.color = 'white';" onmouseout="this.style.borderTop = '2px solid rgba(0,0,0,0)'; this.style.color = 'black';">teams</a>
                <a href="{{ path('app_showNotifsList') }}" class="notifsNav" style="padding:0;" onmouseover="this.style.borderTop = '2px solid {{ gameFrom.color }}'; this.style.color = '{{ gameFrom.color }}';" onmouseout="this.style.borderTop = '2px solid rgba(0,0,0,0)'; this.style.color = 'white';">
                    <div class="navNotifDiv">
                        <i class="fa-solid fa-bell notifBell"></i>
                        {# Bulle newNotifCount si > 0 #}
                        {% if userNotifCount > 0 %}
                            <span class="newNotifBubbleCount bubleNotif" id="newNotifBubbleCount">{{ userNotifCount }}</span>
                        {% endif %}
                    </div>
                </a>
            {% else %}
                <a href="{{ path('app_allGroupList') }}" class="teamsNav caps" onmouseover="this.style.borderTop = '2px solid {{ gameFrom.color }}'; this.style.color = '{{ gameFrom.color }}';" onmouseout="this.style.borderTop = '2px solid rgba(0,0,0,0)'; this.style.color = 'white';">teams</a>
            {% endif %}
            {% if app.user and "ROLE_MODO" in app.user.roles %}
            
                <a href="{{ path('app_moderationDashboard') }}" id="modoNav" class="modoNav" onmouseover="this.style.borderTop = '2px solid {{ gameFrom.color }}'; this.style.color = '{{ gameFrom.color }}';" onmouseout="this.style.borderTop = '2px solid rgba(0,0,0,0)'; this.style.color = 'white';">
                    <div class="modoNavSubDiv">
                        <span>Modération</span>
                        {% if modoNotifValidationCount > 0 %}
                            <span class="newNotifBubbleCount bubleModo1">{{ modoNotifValidationCount }}</span>
                        {% endif %}
                        {% if modoNotifReportCount > 0 %}
                            <span class="newNotifBubbleCount bubleModo2">{{ modoNotifReportCount }}</span>
                        {% endif %}
                    </div>
                </a>

                <script>
                    // Ajout d'espace libre sur l'onglet Nav "Modération" si bulles (car bulles absolutes)
                    var paddingRightOnglet = 0;
                    if({{modoNotifValidationCount}} > 0) {
                        paddingRightOnglet += 17;
                    }
                    if({{modoNotifReportCount}} > 0) {
                        paddingRightOnglet += 17;
                    }
                    document.getElementById('modoNav').style.paddingRight = paddingRightOnglet + "px";
                </script>

            {% endif %}

            {# Profil + deco #}
            <div id="profilBurgerMobile">
                {% if app.user %}
                    <a href="{{ path('app_user') }}" class="profil" id="profilBtnNav"><i class="fa-solid fa-user profilIcon"></i>  {{ app.user.pseudo|capitalize }}</a>
                    <a href="{{ path('app_logout') }}" class="decoBtn"><i class="fa-solid fa-power-off decoBtnMobile"></i></a>
                {% else %}
                    <a href="{{ path('app_login') }}" class="profil" id="loginBtnNav" style="border-right:2px solid #80808061">Connexion</a>
                    <a href="{{ path('app_register') }}" class="profil" id="registerBtnNav" style="border-bottom-left-radius:0px;">S'inscrire</a>
                {% endif %}
            </div>

        </nav>

        <a href="{{ path('app_game', {'slug': gameFrom.slug }) }}"><h2 id="headerGameTitle" class="headerGameTitle" style="border-right:10px solid {{ gameFrom.color }}; border-bottom:2px solid {{ gameFrom.color }};">{{ gameFrom.title }}</h2></a>
    
        {# Show menu Burger (mobile) #}
        <span id="showBurgerMenu"><i class="fa-solid fa-bars"></i></span>
        
    </header>


    {# HeaderSouligne + Bandeau avertissement muted #}
    {% if app.user and app.user.muted and time_diff_future(app.user.endDateStatus) != false %}
        <div class="headerUnderline" style="background-color: {{ gameFrom.color }}"></div>
        <div class="mutedBanner">  
            <span><i class="fa-solid fa-circle-exclamation mutedBannerIcon"></i>Vous êtes actuellement réduit au silence <span class="muteEndDate">( fin dans <span class="strongNbr">{{ time_diff_future(app.user.endDateStatus) }}</span> )</span></span>
        </div>
    {% else %}
        <div class="headerUnderline marginBottomHeaderLine" style="background-color: {{ gameFrom.color }}"></div>
    {% endif %}



    <main class="main">

        {# Fil d'Ariane #}
        <p class="breadcrumbs">
            <a class="underlineLink" href="{{ path('app_games') }}">Jeux</a>
            <i class="fa-solid fa-angle-right arianeArrow" style="color:{{ gameFrom.color }}"></i>
            <a class="underlineLink" href="{{ path('app_game', {'slug': gameFrom.slug }) }}">{{ gameFrom.title }}</a>
            <i class="fa-solid fa-angle-right arianeArrow" style="color:{{ gameFrom.color }}"></i>
            <a class="underlineLink" href="{{ path('app_groupList', {'gameIdFrom': gameFrom.id }) }}">Teams</a>
            <i class="fa-solid fa-angle-right arianeArrow" style="color:{{ gameFrom.color }}"></i>
            <span>{{ group.title }}</span>
        </p>

        
        <section id="groupHeader" class="groupHeader" style="background-size:contain; border-bottom:3px solid {{ gameFrom.color }};">

            <div class="groupHeaderSection1">

                <div class="headerLineSection">
                    <h2 style="color:black; backdrop-filter:blur(4px); width:fit-content; padding:4px 15px; border-radius:5px; border:1px solid {{ gameFrom.color }}; border-left: 4px solid var(--background-color); background-color:{{ gameFrom.color }}78; border-top-left-radius:2px; text-transform:uppercase;"> <i class="fa-solid fa-users-rays"></i> Team</h2>
                    <span id="groupHeaderSectionsCollapseBtn" class="collapseMobile chevronRotate"><i class="fa-solid fa-chevron-down" style="color:var(--background-color);"></i></span>
                </div>

                <div id="groupHeaderSectionsCollapse" class="collapseSection2">

                    <h3 class="groupTitle" style="border-top:1px solid {{group.game.color}}; border-bottom:1px solid {{group.game.color}};">{{ group.title }}</h3>

                    <p class="groupDescription">
                        <i class="fa-solid fa-quote-left"></i>
                        <span style="font-family:'K2D', sans-serif;">{{ group.description|capitalize }}</span>
                        <i class="fa-solid fa-quote-right"></i>

                        {# // Btn modif description Leader: #}
                        {% if app.user == group.leader %}
                            <span id="editDescriptionTeam">
                                <i class="fa-solid fa-pen-to-square editDescriptionTeam"></i>
                            </span>
                        
                            <dialog class="modalDialog" id="editDescriptionTeamModal">
                                <form method="post" action="{{ path('app_updateTeamDescription', {'groupSlug': group.slug}) }}">
                                    <p style="font-size:1.3em;">Modifiez la description de la team:</p>

                                    <textarea rows="5" cols="33" name="newTeamDescription" class="form-control" style="margin-bottom:20px;">{{ group.description }}</textarea>

                                    <button type="submit" class="confirmModal">Mettre à jour</button>
                                    <span class="cancelModal" onclick="editDescriptionTeamModal.close()">Annuler</span>                            
                                </form>
                            </dialog>

                            <script>
                                document.getElementById('editDescriptionTeam').addEventListener("click", function() {
                                    document.getElementById('editDescriptionTeamModal').showModal();
                                })
                            </script>


                        {% endif %}
                    </p>

                    <p class="teamHeaderAge">Ancienneté: <span>{{ time_diff(group.creationDate) }}</span></p>

                </div>
        
            </div>

            <div id="teamImgContainer" class="teamImgContainer collapseSection2">
                {% if group.imgUrl is not null and imageExists(group.imgUrl) %}
                    <img src="../img/uploads/{{ group.imgUrl }}" id="teamImg" class="teamImg" alt="image de la team">
                {% else %}
                    <img src="../img/teamDefaultPic_dark.jpg" id="teamImg" class="teamImg" alt="image de team par defaut">
                {% endif %}

                {# Modification de l'img si leader: #}
                <span class="editTeamImgIcon"><i class="fa-solid fa-pen-to-square"></i></span>
                {% if group.leader == app.user %}
                <script>
                    document.getElementById('teamImg').classList.add('hoverTeamImg');
                    document.getElementById('teamImgContainer').classList.add('teamImgContainerHover');
                    document.getElementById('teamImg').addEventListener('click', function() {
                        // Modal input file
                        document.getElementById('changeTeamPicModal').showModal();
                    })
                </script>
                {% endif %}
                
            </div>
        
        </section>

        {# Adaptation background header sur mobile #}
        <script>
                
                document.addEventListener('DOMContentLoaded', function() {
                    var isMobile = navigator.userAgent.match(/Android/i)
                    || navigator.userAgent.match(/webOS/i)
                    || navigator.userAgent.match(/iPhone/i)
                    || navigator.userAgent.match(/iPad/i)
                    || navigator.userAgent.match(/iPod/i)
                    || navigator.userAgent.match(/BlackBerry/i)
                    || navigator.userAgent.match(/Windows Phone/i);
                    
                    
                    if (isMobile){
                        console.log('TEST MOBILE GROUP 1')
                        document.getElementById('groupHeader').style.backgroundImage = "linear-gradient(to top, {{ gameFrom.color }}99, {{ gameFrom.color }}2b), url('../img/testMotif2.jpg')";
                        document.getElementById('groupHeader').style.backgroundSize = "cover";
                    }
                    else {
                        document.getElementById('groupHeader').style.backgroundImage = "linear-gradient(to right, {{ gameFrom.color }}8c, {{ gameFrom.color }}50, #232323ba, #101010f7), url('../img/testMotif2.jpg')";
                        document.getElementById('groupHeader').style.backgroundSize = "contain";
                    }
                })

        </script>


        {# Modal change teamPic #}
        <dialog class="modalDialog" id="changeTeamPicModal">
            <form method="post" action="{{ path('app_updateTeamPic', {'groupSlug': group.slug}) }}" enctype="multipart/form-data">
            
                <p style="font-size:1.3em;">Sélectionnez la nouvelle image:</p>

                <input type="file" name="newTeamPic" accept="image/png, image/jpeg">
            
                <button type="submit" class="confirmModal">Mettre à jour</button>
                <span class="cancelModal" onclick="changeTeamPicModal.close()">Annuler</span>
            </form>
        </dialog>


        {# Liste des membres du groupe #}
        <section class="sectionContainer teamSectionContainer" style="border: 1px solid {{ gameFrom.color }}50; border-top:2px solid {{ gameFrom.color }}; border-left:1px solid {{ gameFrom.color }};">

            <div class="headerLineSection">
                <div class="gameInfosSubTitleBg" style="background-color: {{ gameFrom.color }}"></div>
                <h3 class="gameSubTitle noMarginBottom" style="color:{{ gameFrom.fontColor }}"><i class="fa-solid fa-user-group"></i> Membres</h3>
                <span id="groupMemberSectionCollapseBtn" class="collapseMobile chevronRotate" style="left:1px;"><i class="fa-solid fa-chevron-down"></i></span>
            </div>

            <div id="groupMemberSectionCollapse" class="sectionContent collapseSection2" style="display:flex;">

                {# Modifier le nbr de places (leader) #}
                {% if app.user == group.leader %}
                    <span id="editNbrPlacesTeam">
                        <i class="fa-solid fa-pen-to-square editNbrPlacesTeam"></i>
                    </span>
                
                    <dialog class="modalDialog" id="editNbrPlacesTeamModal">
                        <form method="post" action="{{ path('app_updateTeamNbrPlaces', {'groupSlug': group.slug}) }}">
                            <p style="font-size:1.3em;">Changez le nombre de places disponibles:</p>

                            <input type="number" name="newTeamNbrPlaces" value="{{ group.nbrPlaces }}" class="form-control" style="margin-bottom:20px;" min="2" max="10">

                            <button type="submit" class="confirmModal">Mettre à jour</button>
                            <span class="cancelModal" onclick="editNbrPlacesTeamModal.close()">Annuler</span>                            
                        </form>
                    </dialog>

                    <script>
                        document.getElementById('editNbrPlacesTeam').addEventListener("click", function() {
                            document.getElementById('editNbrPlacesTeamModal').showModal();
                        })
                    </script>

                {% endif %}



                <ul id="membersList" class="membersList">

                    <li class="nbrPlacesTeam">
                        <span><span style="color:{{ gameFrom.color }}; font-weight:bold;">{{ group.members|length }}</span><span style="font-size:0.7em; margin-left:5px; margin-right:2px;">/{{ group.nbrPlaces }}</span></span>
                    </li>

                    {# Card Leader (position 1) #}
                    {% if group.leader == app.user %}
                        {% set leaderPseudo = "Vous" %}
                    {% else %}
                        {% set leaderPseudo = group.leader.pseudo %}
                    {% endif %}

                    <li class="memberCard leaderCard" style="background-color: {{ gameFrom.color }}">
                        {{ leaderPseudo|capitalize }}
                        <span style="text-align:center; color:#ffe039;filter:drop-shadow(2px 4px 6px black);"><i class="fa-solid fa-crown"></i></span>
                    </li>
                    

                    {% set indexMember = 0 %}
                    {% for member in members %}
                
                        {% if member != group.leader %}
                        
                            {# Leader Card #}
                            {% if member == app.user %}
                                {% set memberPseudo = "Vous" %}
                            {% else %}
                                {% set memberPseudo = member.pseudo|capitalize %}
                            {% endif %}
                            
                            <li class="memberCard" style="background-color: {{ gameFrom.color }}">{{ memberPseudo }}
                            {% if app.user == group.leader and app.user != member %}    
                                <span class="kickMemberBtn" onclick="kickMemberModal{{indexMember}}.showModal()">
                                    <i class="fa-solid fa-user-large-slash"></i>
                                </span> 

                                <dialog class="modalDialog" id="kickMemberModal{{indexMember}}">
                                    <p>Êtes-vous sûr de vouloir éjecter {{ member.pseudo|capitalize }} de la team ?</p>
                                    <a class="confirmModal" href="{{ path('app_kickGroupMember',{'memberId': member.id, 'groupSlug': group.slug, 'type':"normal"}) }}">Oui</a>
                                    <a class="confirmModal" href="{{ path('app_kickGroupMember',{'memberId': member.id, 'groupSlug': group.slug, 'type':"blacklisted"}) }}">Oui et blacklister</a>
                                    <span class="cancelModal" onclick="kickMemberModal{{indexMember}}.close()">Annuler</span>
                                </dialog>

                            {% endif %}
                            </li>
                        
                        {% endif %}

                        {% set indexMember = indexMember + 1 %}
                            
                    {% endfor %}

                </ul>

            </div>

        </section>



        {# Emplacements de membre vides (TODO: remplacer par var Twig) #}
        <span id="nbrPlacesGroup" hidden>{{ group.nbrPlaces }}</span>
        <span id="groupColor" hidden>{{ gameFrom.color }}</span>
        <script>
            window.onload = function() {
                var nbrPlaces = parseInt(document.getElementById("nbrPlacesGroup").textContent);
                var membresCount = document.getElementById("membersList").childElementCount;

                for (let index = -1; index < (nbrPlaces - membresCount); index++) {
                    {% if app.user in members %}
                        var voidMember = document.createElement("li");
                        voidMember.className = "voidMemberNoClick";
                        voidMember.innerHTML = "<i class='fa-regular fa-circle-user'></i>";
                    {% else %}
                        var voidMember = document.createElement("a");
                        voidMember.href = "{{ path('app_showCandidatureForm', {'groupSlug':group.slug}) }}";
                        voidMember.className = "voidMember";
                        voidMember.innerHTML = "<i class='fa-solid fa-plus'></i>";
                    {% endif %}
                    
                    
                    // voidMember.style.backgroundColor = document.getElementById("groupColor").innerText;
                    voidMember.style.backgroundColor = "#3f3f3f";
                    voidMember.style.color = document.getElementById("groupColor").innerText;

                    document.getElementById("membersList").append(voidMember);
                }
            }
        </script>



        {% if app.user in group.members %}

            {% if group.leader == app.user %}

                <span id="groupId" hidden>{{ group.id }}</span>
                {# Toggle Visibilité du group #}
                {% if group.status == "public" %}
                    {% set visibilityState = "checked" %}
                {% else %}
                    {% set visibilityState = "" %}
                {% endif %}

                {% if group.restriction18 %}
                    {% set restriction18State = "checked" %}
                {% else %}
                    {% set restriction18State = "" %}
                {% endif %}

                {% if group.restrictionMic %}
                    {% set restrictionMicState = "checked" %}
                {% else %}
                    {% set restrictionMicState = "" %}
                {% endif %}

                {% if group.restrictionImgProof %}
                    {% set restrictionImgProofState = "checked" %}
                {% else %}
                    {% set restrictionImgProofState = "" %}
                {% endif %}



                {# Planification des sessions (FullCalendar JS) #}
                <section class="sectionContainer teamSectionContainer" style="border: 1px solid {{ gameFrom.color }}50; border-top:2px solid {{ gameFrom.color }}; border-left:1px solid {{ gameFrom.color }};">
    
                    <div class="headerLineSection">
                        <div class="gameInfosSubTitleBg" style="background-color: {{ gameFrom.color }}"></div>
                        <h3 class="gameSubTitle noMarginBottom" style="color:{{ gameFrom.fontColor }}"><i class="fa-solid fa-calendar-days"></i> Planning</h3>
                        <span id="groupPlanningSectionCollapseBtn" class="collapseMobile chevronRotate" style="left:1px;"><i class="fa-solid fa-chevron-down"></i></span>
                    </div>

                    <div id="groupPlanningSectionCollapse" class="collapseSection3">

                        <div class="sectionContent">

                            <div class="planningInfos">
                                {% if incomingSessionsCount > 0 %}
                                
                                    <div style="display:inline-flex; flex-direction:column;">
                                        <span style="display:inline-flex; align-items:center; justify-content:center;">Sessions à venir: <span class="incomingSessionsNbr">{{ incomingSessionsCount }}</span></span>
                                        <span style="font-family:'K2D',sans-serif;">Prochaine session prévue: dans {{ time_diff_future(nextSession.dateStart) }}</span>
                                    </div>

                                {% else %}
                                    
                                    <span>Sessions à venir: <span class="emptyListMsg">Aucune session à venir.</span></span>

                                {% endif %}
                            </div>

                            <div id='calendar'></div>

                        </div>


                        <div id="addSessionBtn" style="text-align:center;">
                            <button class="btn btn-primary" style="background-color:#edb017; margin:20px auto;"><i class="fa-solid fa-calendar-plus"></i> Ajouter une session</button>
                        </div>

                        <div id="addSessionForm" class="notDisplayed">

                            {# ids pour flatPickr #}
                            {{ form_start(formAddSession,  {'attr': {'id': 'form_add_session'}})}}
                                {{ form_row(formAddSession.title) }}
                                {{ form_label(formAddSession.dateStart, 'Début') }}
                                {{ form_widget(formAddSession.dateStart, {'id': 'date_start_picker'}) }}
                                {{ form_label(formAddSession.dateEnd, 'Fin') }}
                                {{ form_widget(formAddSession.dateEnd, {'id': 'date_end_picker'}) }}
                                {# {{ form_row(formAddSession.comfirmNeeded) }} #}
                                
                                {{ form_widget(formAddSession._token) }}
                                {{ form_errors(formAddSession) }}
                            
                                <br>
                                <div style="display:inline-flex;margin:10px auto;">
                                    {{ form_row(formAddSession.submit) }}
                                    <button id="cancelAddSession" class="btn btn-primary btnCancel" style="margin-left:15px;">Annuler</button>
                                </div>

                            {{ form_end(formAddSession)}}

                            {# Spinning loader #}
                            <div id="spinningLoaderSessionForm" class="spinner spinningLoader" style="z-index:9999; transform:translate(-50%, -50%) scale(1.2);">
                                <div class="lds-roller">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>

                            <script>
                                document.getElementById('form_add_session').addEventListener('submit', function() {
                                    document.getElementById('form_add_session').style.opacity = "0.3";
                                    document.getElementById('session_submit').disabled = true;
                                    document.getElementById('spinningLoaderSessionForm').classList.toggle('spinningLoader');
                                })
                            </script>

                            {# Adaptation de la couleur du load Spinner #}
                            <script>
                                var gameColor = "{{ gameFrom.color }}";
                                var loaderCss = document.createElement("style");
                                loaderCss.innerHTML = ".lds-roller div:after { background: " + gameColor + "; }";
                                document.head.appendChild(loaderCss);
                            </script>

                            {# Style des inputs DateTime calendrier ajout session #}
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    flatpickr('#date_start_picker', {
                                        enableTime: true,
                                        minDate: 'today',
                                        dateFormat: 'Y-m-d H:i',
                                    });

                                    flatpickr('#date_end_picker', {
                                        enableTime: true,
                                        minDate: 'today',
                                        dateFormat: 'Y-m-d H:i',
                                    });
                                });
                            </script>
                        
                        </div>


                        <div id="eventDetailDiv" class="notDisplayed" style="border-color: {{ gameFrom.color }}; background-color: {{ gameFrom.color }}08;">
                            <h5>Détail de la session</h5>                              
                            <span id="eventTitle"></span>
                            <a id="cancelEventBtn">Annuler la session</a>
                            <h5>Disponibilités</h5>
                            <div style="display:inline-flex; width:100%; justify-content:center;">
                                <div style="display:inline-flex; flex-direction:column; margin:0 10px;">
                                    <i id="member{{ app.user.id }}" class="fa-solid fa-user" style="color:#008926;"></i>
                                    <span>Vous</span>
                                </div>
                                {% for member in members %}
                                    {% if member != group.leader %}
                                        <div style="display:inline-flex; flex-direction:column; margin:0 10px;">
                                            <i id="member{{ member.id }}" class="fa-solid fa-user"></i>
                                            <span>{{ member.pseudo|capitalize }}</span>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>


                        {# Click sur session Calendrier/Callendar (ajax récup de la disponibilité des membres) #}
                        <script>
                            document.addEventListener('DOMContentLoaded', function() {

                                let calendarEl = document.getElementById('calendar');
                                let data = '{{ groupSessionsArray | raw }}';
                                let res = JSON.parse(data);

                                var calendar = new FullCalendar.Calendar(calendarEl, {
                                    eventClick: function(info) {

                                        document.getElementById("eventDetailDiv").classList.remove("notDisplayed");

                                        // scroll detail Session
                                        const element = document.getElementById("eventDetailDiv");
                                        element.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});

                                        // console.log(info.event.title)
                                        // console.log(info.event.extendedProps.sessionId)
                                        // console.log(info.event.extendedProps.confirmRequired)
                                        // console.log(info.event.start)
                                        // console.log(info.event.end)

                                        // Url des boutons de disponibilité
                                        document.getElementById("cancelEventBtn").setAttribute("href", "/cancelSession/" + info.event.extendedProps.sessionId);

                                        document.getElementById("eventTitle").textContent = '"' + info.event.title + '"';


                                        // Ajax get les dispoState des membres pour la session cliquée 
                                        $.ajax({
                                            url: '/getSessionMembersDispo/' + info.event.extendedProps.sessionId,
                                            type: 'GET',
                                            success: function(response) {
                                                console.log(response.memberDispoArray);
                                                for (let i = 0; i < response.memberDispoArray.length; i++) {
                                                    if(response.memberDispoArray[i]["disponibility"] == "dispo") {
                                                        document.getElementById("member" + response.memberDispoArray[i]["id"]).style.color = "#008926";
                                                    }
                                                    else if (response.memberDispoArray[i]["disponibility"] == "perhaps") {
                                                        document.getElementById("member" + response.memberDispoArray[i]["id"]).style.color = "#a6490f";
                                                    }
                                                    else if (response.memberDispoArray[i]["disponibility"] == "notdispo") {
                                                        document.getElementById("member" + response.memberDispoArray[i]["id"]).style.color = "#890035";
                                                    }
                                                }
                                            },
                                            error: function(xhr, status, error) {
                                                window.FlashMessage.error('Une erreur est survenue');
                                            }
                                        });

                                    },
                                    initialView: 'dayGridWeek',
                                    locale: 'fr',
                                    timeZone: 'Europe/Paris',
                                    firstDay: 1,
                                    headerToolbar: {
                                        start: 'prev next today',
                                        center: 'title',
                                        end: 'dayGridMonth listMonth listYear',
                                    },
                                    buttonText: {
                                        'today' : 'Aujourd\'hui',
                                        'week' : 'semaine',
                                        'month' : 'Grille',
                                        'listMonth' : 'Mois',
                                        'listYear' : 'Année',
                                    },
                                    events: res,
                                });

                                calendar.render();

                                // toggle affichage du formulaire d'ajout de session
                                document.getElementById('addSessionBtn').addEventListener('click', function() {
                                    document.getElementById('addSessionBtn').classList.toggle('notDisplayed');
                                    document.getElementById('addSessionForm').classList.toggle('notDisplayed');
                                });
                                document.getElementById('cancelAddSession').addEventListener('click', function() {
                                    document.getElementById('addSessionBtn').classList.toggle('notDisplayed');
                                    document.getElementById('addSessionForm').classList.toggle('notDisplayed');
                                });
                            });
                        </script>

                    </div>

                </section>



                <div style="width:100%; display:inline-flex; margin-top:40px;">
                    <h2 style="margin:0 auto; width:fit-content; display:inline-flex;">
                        <i class="fa-solid fa-crown" style="color:#edb017; margin:0px 15px;"></i> 
                        <span>Espace Leader</span>
                    </h2>
                </div>



                <section class="sectionContainer teamSectionContainer" style="border: 1px solid {{ gameFrom.color }}50; border-top:2px solid {{ gameFrom.color }}; border-left:1px solid {{ gameFrom.color }};">

                    <header class="headerLineSection">
                        <div class="gameInfosSubTitleBgParam" style="background-color:#edb017"></div>
                        <h3 class="gameSubTitle noMarginBottom" style="color:{{ gameFrom.fontColor }}"><i class="fa-solid fa-users-gear"></i> Paramètres</h3>
                        <span id="groupParamSectionCollapseBtn" class="collapseMobile chevronRotate" style="left:1px;"><i class="fa-solid fa-chevron-down"></i></span>
                    </header>

                    <div id="groupParamSectionCollapse" class="sectionContent sectionTeamParam collapseSection2">

                        <div class="headerParamBorderMobile" style="margin-right:35px; border-right:1px solid {{ gameFrom.color }}70">
                            {# Leader: Passer le lead #}
                            {% if members|length > 1 %}
                                <div class="passLeadDiv">
                                    <p class="passLeadTitle">Passer le leadership</p>
                                    <div class="passLeadLine" style="display:inline-flex; width:100%; position:relative;">

                                        <form id="switchTeamLeader" action="{{ path('app_switchTeamLeader',{ 'groupSlug':group.slug }) }}" method="post" style="display:inline-flex;">
                                            <select id="memberLeadSelect" class="form-select" name="memberId" style="font-family: 'K2D', sans serif;">
                                                <option id="voidSelect" value="">-- Choisir</option>
                                                {% for member in group.members %}
                                                    {% if member != app.user %}
                                                        <option value="{{member.id}}">{{member.pseudo|capitalize}}</option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                            <button id="memberLeadSubmit" type="submit" value="" class="btn btn-primary" style="background-color:{{ gameFrom.color }}" disabled> 
                                                <i class='fa-solid fa-crown'></i><i class='fa-solid fa-arrow-right'></i><i class='fa-solid fa-user'></i>
                                            </button>
                                        </form>

                                    </div>

                                    {# Spinning loader #}
                                    <div id="spinningLoaderLeaderForm" class="spinner spinningLoader" style="z-index:9999; transform:translate(-50%, -50%) scale(1);">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                    </div>

                                    <script>
                                        document.getElementById('switchTeamLeader').addEventListener('submit', function() {
                                            document.getElementById('switchTeamLeader').style.opacity = "0.3";
                                            document.getElementById('memberLeadSubmit').disabled = true;
                                            document.getElementById('spinningLoaderLeaderForm').classList.toggle('spinningLoader');
                                        })
                                    </script>

                                </div>
                            {% else %}
                                {# Form factice (si aucun autre membre) #}
                                <div class="passLeadDiv">
                                    <p style="width:auto; font-family:'K2D',sans-serif;">Passer le leadership</p>
                                    <div class="passLeadLine" style="display:inline-flex; width:100%; opacity:0.5;">
                                        <form id="switchTeamLeader" style="display:inline-flex;">
                                            <select disabled id="memberLeadSelect" class="form-select" name="memberId" style="font-style:italic; color:grey; font-family: 'K2D', sans serif;">
                                                <option id="voidSelect" style="" value="">Aucun membre</option>
                                            </select>
                                            <button id="memberLeadSubmit" type="submit" value="" class="btn btn-primary" style="background-color:{{ gameFrom.color }}" disabled> 
                                                <i class='fa-solid fa-crown'></i><i class='fa-solid fa-arrow-right'></i><i class='fa-solid fa-user'></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            {% endif %}
                                
                                
                                <script>    
                                    document.getElementById("memberLeadSelect").addEventListener("change", function() {
                                        if (document.getElementById("voidSelect").selected) {
                                            document.getElementById("memberLeadSubmit").disabled = true;
                                        }
                                        else {
                                            document.getElementById("memberLeadSubmit").disabled = false;
                                        }
                                    })
                                </script>

                                {# Bouton liste blacklistedUsers #}
                                {% if group.blacklistedUsers|length > 0 %}
                                    <a href="{{ path('app_groupBlacklist',{'groupSlug': group.slug}) }}">
                                        <div class="blacklistBtn">
                                            <i class="fa-solid fa-users-slash"></i>
                                            <span>Blacklist ({{ blacklistedNbr }})</span>
                                        </div>
                                    </a>
                                {% else %}
                                    <div class="blacklistBtn" style="border-color: grey; opacity:0.7; border-width:1px; cursor:default;">
                                        <i class="fa-solid fa-users-slash"></i>
                                        <span>Blacklist ({{ blacklistedNbr }})</span>
                                    </div>
                                {% endif %}

                            </div>


                            <div>
                                <p class="groupParamOptionLabel">Options</p>
                                <div class="togglesContainer">

                                    {# Asynch toggleGroupVisibility #}
                                    <div style="display:inline-flex;">
                                        <div style="display:inline-flex;">
                                            <i class="fa-solid fa-eye" style="position:relative; margin-right:13px; top:4px;"></i>
                                            <p style="margin-right: 15px;">Privé</p>
                                        </div>
                                        <form id="toggleGroupVisibilityForm" action="{{ path('app_toggleGroupVisibility',{ 'groupId':group.id }) }}" method="post">
                                            <label class="toggleAutoPlay">
                                                <input type="checkbox" {{ visibilityState }} name="autoPlay" id="toggleVisi">
                                                <span class="slider"></span>
                                            </label>
                                        </form>
                                        <p style="margin-left: 15px;">Public</p>
                                    </div>

                                    <script>
                                        document.getElementById('toggleGroupVisibilityForm').addEventListener('change', function(event) {
                                            
                                            event.preventDefault(); // Empêche la soumission normale du formulaire

                                            const groupId = parseInt(document.getElementById("groupId").textContent);
                                            fetch('/toggleGroupVisibility/' + groupId, {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json'
                                            }})
                                            .then(response => response.json())
                                            .then(data => {
                                                if (data.success) {
                                                    window.FlashMessage.success(data.newState);                                                    
                                                } else {
                                                    window.FlashMessage.error('Vous devez être le leader du groupe pour changer sa visibilité');
                                                }
                                            });
                                        });
                                    </script>

                                    {# Asynch toggleRestriction18 #}
                                    <div style="display:inline-flex;">
                                        <div style="display:inline-flex;">
                                            <img src="/img/criteria_18.png" style="filter:invert(0.9); width:20px; height:20px; margin-right:13px;" alt="icone interdit au mineurs">
                                            <p style="margin-right:15px;">Majorité obligatoire</p>
                                        </div>
                                        <form id="toggleGroupRestriction18Form" action="{{ path('app_toggleGroupRestriction18',{ 'groupId':group.id }) }}" method="post">
                                            <label class="toggleAutoPlay">
                                                <input type="checkbox" {{ restriction18State }} name="autoPlay" id="toggleVisi">
                                                <span class="slider"></span>
                                            </label>
                                        </form>
                                    </div>

                                    <script>
                                        document.getElementById('toggleGroupRestriction18Form').addEventListener('change', function(event) {
                                            
                                            event.preventDefault(); // Empêche la soumission normale du formulaire

                                            const groupId = parseInt(document.getElementById("groupId").textContent);
                                            fetch('/toggleGroupRestriction18/' + groupId, {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json'
                                            }})
                                            .then(response => response.json())
                                            .then(data => {
                                                if (data.success) {
                                                    window.FlashMessage.success(data.newState);   
                                                } else {
                                                    window.FlashMessage.error('Vous devez être le leader du groupe pour changer ce critère');
                                                }
                                            });
                                        });
                                    </script>

                                    {# Asynch toggleRestrictionMic #}
                                    <div style="display:inline-flex;">
                                        <div style="display:inline-flex;">
                                            <img src="/img/criteria_micro.png" style="filter:invert(0.9); width:20px; height:20px; margin-right:13px;" alt="icone microphone">
                                            <p style="margin-right:15px;"> Micro obligatoire</p>
                                        </div>
                                        <form id="toggleGroupRestrictionMicForm" action="{{ path('app_toggleGroupRestrictionMic',{ 'groupId':group.id }) }}" method="post">
                                            <label class="toggleAutoPlay">
                                                <input type="checkbox" {{ restrictionMicState }} name="autoPlay" id="toggleVisi">
                                                <span class="slider" style="margin-left:22px;"></span>
                                            </label>
                                        </form>
                                    </div>

                                    <script>
                                        document.getElementById('toggleGroupRestrictionMicForm').addEventListener('change', function(event) {
                                            
                                            event.preventDefault(); // Empêche la soumission normale du formulaire

                                            const groupId = parseInt(document.getElementById("groupId").textContent);
                                            fetch('/toggleGroupRestrictionMic/' + groupId, {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json'
                                            }})
                                            .then(response => response.json())
                                            .then(data => {
                                                if (data.success) {
                                                    window.FlashMessage.success(data.newState); 
                                                } else {
                                                    window.FlashMessage.error('Vous devez être le leader du groupe pour changer ce critère');
                                                }
                                            });
                                        });
                                    </script>

                                    {# Asynch toggleRestrictionImgProof (Autoriser l'upload d'une image pour prouver un Lvl par exemple, à accompagner d'une description du screen attendu) #}
                                    {# <div style="display:inline-flex;">
                                        <p style="margin-right:15px;">Autoriser pièce jointe</p>
                                        <form id="toggleRestrictionImgProof" action="{{ path('app_toggleRestrictionImgProof',{ 'groupSlug':group.slug }) }}" method="post">
                                            <label class="toggleAutoPlay">
                                                <input type="checkbox" {{ restrictionImgProofState }} name="autoPlay" id="toggleVisi">
                                                <span class="slider"></span>
                                            </label>
                                        </form>
                                    </div>

                                    <script>
                                        document.getElementById('toggleRestrictionImgProof').addEventListener('change', function(event) {
                                            
                                            event.preventDefault(); // Empêche la soumission normale du formulaire

                                            const groupId = parseInt(document.getElementById("groupId").textContent);
                                            fetch('/toggleRestrictionImgProof/' + groupId, {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json'
                                            }})
                                            .then(response => response.json())
                                            .then(data => {
                                                if (data.success) {
                                                    window.FlashMessage.success(data.newState); 
                                                } else {
                                                    window.FlashMessage.error('Vous devez être le leader du groupe pour changer ce critère');
                                                }
                                            });
                                        });
                                    </script> #}

                                </div>

                            </div>

                        </div>

                    </div>

                </section>






                                        

                {# Customisation des candidature #}
                <section class="sectionContainer teamSectionContainer" style="border: 1px solid {{ gameFrom.color }}50; border-top:2px solid {{ gameFrom.color }}; border-left:1px solid {{ gameFrom.color }};">
                    
                    <div class="headerLineSection">
                        <div class="gameInfosSubTitleBg" style="background-color: #edb017"></div>
                        <h3 class="gameSubTitle noMarginBottom" style="color:{{ gameFrom.fontColor }}"><i class="fa-solid fa-clipboard-user"></i> Candidature</h3>
                        <span id="groupCandidatureSectionCollapseBtn" class="collapseMobile chevronRotate" style="left:1px;"><i class="fa-solid fa-chevron-down"></i></span>
                    </div>

                    <div id="groupCandidatureSectionCollapse" class="sectionContent collapseSection2">

                        {% if candidatureCount == 0 %}
                            <span class="candidaturesListBtn" style="border-color: grey; opacity:0.7; border-width:1px; cursor:default;"><i class="fa-regular fa-clock"></i> Candidatures en attente ({{ candidatureCount }})</span>
                        {% else %}
                            <a href="{{ path('app_candidatureList',{'groupSlug':group.slug}) }}" class="candidaturesListBtn" style="border-color: {{ gameFrom.color }}", onmouseover="this.style.backgroundColor = '{{ gameFrom.color }}';" onmouseout="this.style.backgroundColor = 'rgb(56 56 56)';"><i class="fa-regular fa-clock"></i> Candidatures en attente <span class="bulleWaitingCandidature" style="background-color:{{gameFrom.color}}">{{ candidatureCount }}</span></a>
                        {% endif %}


                        <div style="padding-top:20px; border-top:1px solid {{ gameFrom.color }}50;">

                            <div style="display:inline-flex;">
                                <h5>Message de l'offre</h5>
                                <span id="editCandidatureOfferTxt">
                                    <i class="fa-solid fa-pen-to-square editCandidatureOfferTxt"></i>
                                </span>
                            </div>

                            <p class="hiringTxt">
                                {% if group.candidatureTxt|length > 0 %}
                                    <i class="fa-solid fa-angles-left quoteTxt"></i>{{ group.candidatureTxt|capitalize }}<i class="fa-solid fa-angles-right quoteTxt"></i>
                                {% else %}
                                    <span class="quoteTxt emptyListMsg" style="padding: margin:0px 11px 0px 11px;">Aucun message de recrutement</span>
                                {% endif %}
                            </p>

                            {# Modal change teamPic #}
                            <dialog class="modalDialog" id="changeCandidatureTxtModal">
                                <form method="post" action="{{ path('app_updateTeamCandidatureTxt', {'groupSlug': group.slug}) }}" enctype="multipart/form-data">
                                
                                    <p style="font-size:1.3em;">Décrivez quel profil de joueur vous recherchez:</p>

                                    <textarea rows="5" cols="33" name="newTeamCandidatureTxt" class="form-control" style="margin-bottom:20px;">{{ group.candidatureTxt }}</textarea>
                                
                                    <button type="submit" class="confirmModal">Mettre à jour</button>
                                    <span class="cancelModal" onclick="changeCandidatureTxtModal.close()">Annuler</span>
                                </form>
                            </dialog>

                            <script>
                                document.getElementById('editCandidatureOfferTxt').addEventListener("click", function() {
                                    document.getElementById('changeCandidatureTxtModal').showModal();
                                })
                            </script>

                            {# <div></divW #}


                            <h5 style="border-top:1px solid #ffffff36; padding-top:18px;">Questionnaire</h5> 
                            {# Liste des questions #}
                            <div class="questionsContainer">
                            {% if questions|length > 0 %}
                            
                                {% for question in questions %}
                                    <div class="questionLineList">
                                        <div style="display:inline-flex; line-height:0; align-items:center;">
                                            <i class="fa-solid fa-clipboard-question addQuestionIcon" style="color:{{gameFrom.color}}"></i>
                                            <span style="position:relative; bottom:1px;">{{ question.text }}</span>
                                            {% if question.required %}
                                                <span class="requiredStar"><i class="fa-solid fa-star-of-life"></i></span>
                                            {% endif %}
                                        </div>
                                        <a class="deleteQuestion" href="{{ path('app_deleteGroupQuestion',{'groupSlug': group.slug, 'questionId': question.id}) }}" class="deleteQuestionBtn"><i class="fa-solid fa-trash"></i></a>
                                    </div>
                                {% endfor %}

                            {% else %}
                                
                                <span class="emptyListMsg">Aucune question posée pour l'instant</span>

                            {% endif %}
                            </div>

                            {# Ajouter une question #}    
                            {% if questions|length >= 5 %}
                                <p class="emptyListMsg">Vous avez atteint la limite de question (5/5)</p>
                            {% else %}
                                <div style="position:relative;">

                                    <form id="questionsContainer" action="{{ path('app_addGroupQuestion',{'groupSlug': group.slug}) }}" method="post">
                                        <div class="inputQuestionLine">
                                            <i class="fa-solid fa-clipboard-question addQuestionIcon" style="color:{{gameFrom.color}}"></i>
                                            <input type="text" id="questionText" name="questionText" placeholder="Entrez une question de candidature..." class="form-control" required style="border:1px solid {{ gameFrom.color }}57;"></input>
                                            <div title="Rendre la question obligatoire" class="requiredQuestionDiv">
                                                <label for="required" class="requiredQuestionLabel"><span class="requiredStar"><i class="fa-solid fa-star-of-life"></i></span></label>
                                                <input checked type="checkbox" name="required" value="checked" class="questionRequired form-check-input"></input>
                                            </div>
                                        </div>
                                        <input type="submit" id="question_submit" class="btn btn-primary" value="Ajouter"></input>
                                    </form>

                                    {# Spinning loader #}
                                    <div id="spinningLoaderQuestionForm" class="spinner spinningLoader" style="z-index:9999; transform:translate(-50%, -50%) scale(1.1);">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                    </div>

                                    <script>
                                        document.getElementById('questionsContainer').addEventListener('submit', function() {
                                            document.getElementById('questionsContainer').style.opacity = "0.3";
                                            document.getElementById('question_submit').disabled = true;
                                            document.getElementById('spinningLoaderQuestionForm').classList.toggle('spinningLoader');
                                        })
                                    </script>
                                </div>

                            {% endif %}
                        </div>
                        
                    {% else %}

                        {# // Planning (lecture seul) #}
                        {# Planification des sessions (FullCalendar JS) #}
                        <div class="sectionContainer teamSectionContainer" style="border: 1px solid {{ gameFrom.color }}50; border-top:2px solid {{ gameFrom.color }}; border-left:1px solid {{ gameFrom.color }};">
            
                            <div class="headerLineSection">
                                <div class="gameInfosSubTitleBg" style="background-color: {{ gameFrom.color }}"></div>
                                <h3 class="gameSubTitle noMarginBottom"><i class="fa-solid fa-calendar-days"></i> Planning</h3>
                                <span id="groupPlanningSectionCollapseBtn" class="collapseMobile chevronRotate" style="left:1px;"><i class="fa-solid fa-chevron-down"></i></span>
                            </div>

                            <div id="groupPlanningSectionCollapse" class="sectionContent collapseSection3">

                                <div class="planningInfos">
                                    {% if incomingSessionsCount > 0 %}
                                    
                                        <div style="display:inline-flex; flex-direction:column;">
                                            <span style="display:inline-flex; align-items:center; justify-content:center;">Sessions à venir: <span class="incomingSessionsNbr">{{ incomingSessionsCount }}</span></span>
                                            <span style="font-family:'K2D',sans-serif;">Prochaine session prévue: dans {{ time_diff_future(nextSession.dateStart) }}</span>
                                        </div>

                                    {% else %}
                                        
                                        <span>Sessions à venir: <span class="emptyListMsg">Aucune session à venir.</span></span>

                                    {% endif %}
                                </div>

                                <div id='calendar'></div>

                            </div>

                            <div id="eventDetailDiv" class="notDisplayed" style="border-color: {{ gameFrom.color }}; background-color: {{ gameFrom.color }}08;">
                                <div class="">
                                    <h5>Détail de la session</h5>
                                    <span id="eventTitle"></span>
                                </div>

                                <div class="">
                                    <h5>Disponibilité</h5>
                                    <div class="eventDispoOptions">
                                        <span id="eventDispoBtn">Disponible</span>
                                        <span id="eventPerhapsBtn">Peut-être</span>
                                        <span id="eventNotDispoBtn">Indisponible</span>
                                    </div>
                                </div>
                                {# Ajax: Affichage des membres et leur dispo #}
                                {# Leader: btn envoi notif relance sous membre #}
                            </div>


                            {# Click sur session Calendrier/Callendar (ajax récup de la disponibilité du membre connecté et btn toggles) #}
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {

                                    let calendarEl = document.getElementById('calendar');
                                    let data = '{{ groupSessionsArray | raw }}';
                                    let res = JSON.parse(data);

                                    var calendar = new FullCalendar.Calendar(calendarEl, {
                                        eventClick: function(info) {

                                            // reset des state dispo Btn
                                            document.getElementById("eventDispoBtn").classList.remove("dispoState");
                                            document.getElementById("eventPerhapsBtn").classList.remove("perhapsState");
                                            document.getElementById("eventNotDispoBtn").classList.remove("notdispoState");

                                            // Ajax get la dispoState pour la session cliquée et le membre connecté
                                            $.ajax({
                                                url: '/getSessionSelfDispo/' + info.event.extendedProps.sessionId,
                                                type: 'GET',
                                                success: function(response) {
                                                    if (response.selfDisponibility == "dispo") {
                                                        document.getElementById("eventDispoBtn").classList.add("dispoState");
                                                    } else if (response.selfDisponibility == "perhaps") {
                                                        document.getElementById("eventPerhapsBtn").classList.add("perhapsState");
                                                    } else if (response.selfDisponibility == "notdispo") {
                                                        document.getElementById("eventNotDispoBtn").classList.add("notdispoState");
                                                    }

                                                    // Affichage + scroll detail Session
                                                    const element = document.getElementById("eventDetailDiv");
                                                    element.classList.remove("notDisplayed");
                                                    element.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
                                                },
                                                error: function(xhr, status, error) {
                                                    window.FlashMessage.error('Une erreur est survenue');
                                                }
                                            });

                                            // console.log(info.event.extendedProps.sessionId)
                                            document.getElementById("eventTitle").textContent = '"' + info.event.title + '"';

                                            document.getElementById('eventDispoBtn').onclick = function() {
                                                toggleDispo(info.event.extendedProps.sessionId, 'dispo');
                                            };
                                            document.getElementById('eventPerhapsBtn').onclick = function() {
                                                toggleDispo(info.event.extendedProps.sessionId, 'perhaps');
                                            };
                                            document.getElementById('eventNotDispoBtn').onclick = function() {
                                                toggleDispo(info.event.extendedProps.sessionId, 'notdispo');
                                            };
                                        },
                                        initialView: 'dayGridWeek',
                                        locale: 'fr',
                                        timeZone: 'Europe/Paris',
                                        firstDay: 1,
                                        headerToolbar: {
                                            start: 'prev next today',
                                            center: 'title',
                                            end: 'dayGridMonth listMonth listYear',
                                        },
                                        buttonText: {
                                            'today' : 'Aujourd\'hui',
                                            'week' : 'semaine',
                                            'month' : 'Grille',
                                            'listMonth' : 'Mois',
                                            'listYear' : 'Année',
                                        },
                                        events: res,
                                    });

                                    calendar.render();

                                    // toggle de la disponibilité
                                    function toggleDispo(sessionId, disponibility) {
                                        $.ajax({
                                            url: '/updateSessionMemberDispo/' + sessionId + "/" + disponibility,
                                            type: 'GET',
                                            cache: false,
                                            success: function(response) {
                                                window.FlashMessage.success('Disponibilité mise à jour');

                                                if (disponibility === 'dispo') {
                                                    document.getElementById('eventNotDispoBtn').classList.remove("notdispoState");
                                                    document.getElementById('eventPerhapsBtn').classList.remove("perhapsState");
                                                    document.getElementById('eventDispoBtn').classList.add("dispoState");
                                                } else if (disponibility === 'perhaps') {
                                                    document.getElementById('eventNotDispoBtn').classList.remove("notdispoState");
                                                    document.getElementById('eventPerhapsBtn').classList.add("perhapsState");
                                                    document.getElementById('eventDispoBtn').classList.remove("dispoState");
                                                } else if (disponibility === 'notdispo') {
                                                    document.getElementById('eventNotDispoBtn').classList.add("notdispoState");
                                                    document.getElementById('eventPerhapsBtn').classList.remove("perhapsState");
                                                    document.getElementById('eventDispoBtn').classList.remove("dispoState");
                                                }
                                            },
                                            // error: function(xhr, status, error) {
                                            //     window.FlashMessage.error('Une erreur est survenue');
                                            // }
                                        });
                                    }
                                });
                            </script>

                        </div>

                    {% endif %}

                </section>



            {# Quitter le groupe + modal #}
            <span id="leaveGroupBtn" onclick="leaveGroupModal.showModal()">
                <div style="display:inline-flex; justify-content:space-between;">
                    <span>Quitter le groupe</span>
                    <i class="fa-solid fa-person-walking-arrow-right leaveGroupBtnIcon"></i>
                </div>
            </span>

            <dialog class="modalDialog" id="leaveGroupModal">
                {# Si lastMember: warning team delete #}
                <p>Êtes-vous sûr de vouloir quitter la team ?</p>

                {% if members|length == 1 %}
                    <p><i class="fa-solid fa-circle-exclamation"></i> &nbsp; La team sera supprimée</p>
                {% elseif members|length > 1 and group.leader == app.user %}
                    <p><i class="fa-solid fa-circle-exclamation"></i> &nbsp; Le lead du group sera donné à un membre aléatoire</p>
                {% endif %}
                
                <a class="confirmModal" href="{{ path('app_leaveGroup', {'groupSlug': group.slug} )}}">Oui</a>
                <span class="cancelModal" onclick="leaveGroupModal.close()">Annuler</span>
            </dialog>
            
        {% else %}

            {# si candidature en attente #}
            {% if waitingCandidature is not null and waitingCandidature %}
                <span>Candidature en attente</span>
                {# Récup l'id de la candidature (findBy User/group + getOneResult) #}
                <a href="{{ path('app_cancelCandidature',{'candidatureId':candidature.id}) }}">Annuler</a>
            {% else %}
                {% if app.user in group.blacklistedUsers %}
                        <span class="emptyListMsg">Vous ne pouvez plus candidater</span>
                {% else %}   
                    {% if group.members|length == group.NbrPlaces %}
                        <p class="emptyListMsg">Le groupe est plein, vous ne pouvez pas candidater pour l'instant</p>
                    {% else %}
                        <a href="{{ path('app_showCandidatureForm',{'groupSlug': group.slug}) }}">Candidater</a>
                    {% endif %}
                {% endif %}
            {% endif %}

        {% endif %}
        
    </main>


    {# // Adaptation couleur borderBottom HeaderFixed #}
    <script>
        {% if app.user %}
             document.getElementsByClassName('profilIcon')[0].style.color = "{{gameFrom.color}}";
        {% endif %}

        if (document.getElementById('landingPageBool') == null) {
            window.addEventListener('scroll', () => {
                    if (window.scrollY > 0) {
                        if(document.getElementsByClassName('headerFixed')[0] !== null && document.getElementsByClassName('headerFixed')[0] !== undefined) {
                            document.getElementsByClassName('headerFixed')[0].style.borderColor = "{{gameFrom.color}}";

                            document.getElementById('gameHeaderTitle').style.opacity = "1";
                        }
                    }
                    else {
                        document.getElementById('gameHeaderTitle').style.opacity = "0";
                    }

            })
        }
    </script>


{% endblock %}