{% extends 'base.html.twig' %}

{% block title %}Dépot de candidature{% endblock %}
{% block meta_description %}
    Rejoignez la team {{ group.title }}
{% 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"><i class="fa-solid fa-house"></i></a>
            <a href="{{ path('app_games') }}" class="gamesNav caps">jeux</a>
            {% if app.user %}
                <a href="{{ path('app_userGroups') }}" class="teamsNav caps navActive" style="background-color: {{ gameFrom.color }}">teams</a>
                <a href="{{ path('app_showNotifsList') }}" class="notifsNav" style="padding:0;">
                    <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>
            {% endif %}
            {% if app.user and "ROLE_MODO" in app.user.roles %}
            
                <a href="{{ path('app_moderationDashboard') }}" style="color:{{ gameFrom.fontColor }};" id="modoNav" class="modoNav">
                    <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  href="{{ path('app_home') }}"><i class="fa-solid fa-house arianeHome"></i></a>
            <i class="fa-solid fa-angle-right arianeArrow"></i>
            <a class="underlineLink" href="{{ path('app_games') }}">Jeux</a>
            <i class="fa-solid fa-angle-right arianeArrow"></i>
            <a class="underlineLink" href="{{ path('app_game', {'slug': gameFrom.slug }) }}">{{ gameFrom.title }}</a>
            <i class="fa-solid fa-angle-right arianeArrow"></i>
            <a class="underlineLink" href="{{ path('app_groupList', {'gameIdFrom': gameFrom.id }) }}">Teams</a>
            <i class="fa-solid fa-angle-right arianeArrow"></i>
            <a class="underlineLink" href="{{ path('app_groupDetails', {'groupSlug': group.slug }) }}">{{ group.title }}</a>
            <i class="fa-solid fa-angle-right arianeArrow"></i>
            <span>Candidature</span>
        </p>


        <section class="groupHeader" style="background-image: linear-gradient(to right, {{ gameFrom.color }}8c, {{ gameFrom.color }}50, #232323ba, #101010f7), url('../img/testMotif2.jpg'); background-size:contain; border-bottom:3px solid {{ gameFrom.color }};">

            <div style="width:60%; position:relative;">
                <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>

                <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 id="teamImgContainer" class="teamImgContainer" style="width:40%;">
                {% 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>


        <section>

            <h2 class="pageTitle" style="margin: 45px auto 15px auto;">Candidature</h2>

            <div style="width:85%; margin:0 auto;">

                {# Description de l'offre du leader #}
                <p>Message du leader: <span style="font-family:'K2D', sans-serif">"{{ group.candidatureTxt }}"</span></p>




                {# Mix CandidatureType et GroupQuestion #}
                {{ form_start(formCandidature) }}

                    <h5>{{ form_label(formCandidature.text)}}</h5>
                    {{ form_widget(formCandidature.text) }} 

                    {# Pour chaque question: afficher un fomulaire GroupRéponseType (comment link l'entité Réponse à groupQuestion) #}
                    {% if (groupQuestions is not null) and (groupQuestions|length > 0) %}

                        <h5 style="margin-top:30px;">Questions</h5>

                        <div class="questionsContainer">

                            {% set index = 0 %}

                            {% for question in groupQuestions %}

                                {% if question.isRequired %}
                                    {% set required = "required" %}
                                {% else %}
                                    {% set required = "" %}
                                {% endif %}

                                {% set index = index + 1 %}
                                
                                <div class="questionAndAnswer">
                                    <div class="questionLine">
                                        <label for="question{{ question.id }}" style="font-family:'K2D', sans-serif;">{{ question.text|capitalize }}</label>
                                        {% if question.required %}
                                            <span class="requiredStar">
                                                <i class="fa-solid fa-star-of-life"></i>
                                            </span>
                                        {% endif %}
                                    </div>
                                    
                                    <input {{ required }} type="text" id="answer{{ index }}" name="answer{{ index }}" placeholder="Entrez votre réponse..." class="form-control answerInput" />
                                </div>

                            {% endfor %}
                        </div>
                    {% elseif (groupQuestions|length == 0) %}
                        <p class="emptyListMsg" style="margin: 30px auto 35px auto;">Il n'y a aucune question</p>
                    {% endif %}


                    {# checkbox confirtmation majorité (affiché si critère team) #}
                    {% if group.restriction18 %}
                        <div style="display: inline-flex; align-items: center; margin-bottom:25px;">
                            <span style="margin-right:15px;">Confirmer avoir plus de 18ans:</span>
                            <label class="toggleAutoPlay">
                                <input type="checkbox" name="majorityBool" id="majorityBool">
                                <span class="slider"></span>
                            </label>
                        </div>
                    {% endif %}


                    {# Submit #}
                    <div style="text-align:center;" style="margin:30px auto 10px auto !important;">
                        {{ form_row(formCandidature.submit, 
                            { 
                                'label': '<span style="z-index:9999;">Envoyer&nbsp;<i class="fa-solid fa-paper-plane"></i></span>', 
                                'label_html' : true, 
                                'id': 'candidatureSubmitBg',
                                'attr': { 
                                    'class': 'btn btn-primary',
                                } 
                            }) 
                        }}
                    </div>

                {{ form_end(formCandidature) }}

            </div>

        </section>

        {# Couleur du bouton adapté au jeu #}
        <span id="gameColor" hidden>{{ gameFrom.color }}</span>
        <script>
            window.onload = function() {
                document.getElementById('candidatureSubmitBg').style.backgroundColor = document.getElementById('gameColor').textContent;
            }
        </script>
        
    </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 %}