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

{% block title %}Page {{ game.title }}{% endblock %}
{% block meta_description %}
    Détail du jeu {{ game.title }}
{% endblock %}

{% block body %}

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

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

        <div style="display:inline-flex;">
            <a href="{{ path('app_home') }}"><img src="{{ asset('img/games/headerSiteLogo/' ~ game.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 {{ game.color }}'; this.style.color = '{{ game.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 navActive" style="background-color: {{ game.color }}" onmouseover="this.style.borderTop = '2px solid {{ game.color }}'; this.style.color = 'white';" onmouseout="this.style.borderTop = '2px solid rgba(0,0,0,0)'; this.style.color = 'black';">jeux</a>
            {% if app.user %}
                <a href="{{ path('app_userGroups') }}" class="teamsNav caps" onmouseover="this.style.borderTop = '2px solid {{ game.color }}'; this.style.color = '{{ game.color }}';" onmouseout="this.style.borderTop = '2px solid rgba(0,0,0,0)'; this.style.color = 'white';">teams</a>
                <a href="{{ path('app_showNotifsList') }}" class="notifsNav" style="padding:0;" onmouseover="this.style.borderTop = '2px solid {{ game.color }}'; this.style.color = '{{ game.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 {{ game.color }}'; this.style.color = '{{ game.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 {{ game.color }}'; this.style.color = '{{ game.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': game.slug }) }}"><h2 id="headerGameTitle" class="headerGameTitle" style="border-right:10px solid {{ game.color }}; border-bottom:2px solid {{ game.color }};">{{ game.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: {{ game.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: {{ game.color }}"></div>
    {% endif %}



    <main class="main mainGameDetail" style="width:75%;">


        {# 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" style="color:{{ game.color }}"></i>
            <a class="underlineLink" href="{{ path('app_games') }}">Jeux</a>
            <i class="fa-solid fa-angle-right arianeArrow" style="color:{{ game.color }}"></i>
            <span>{{ game.title }}<span>
        </p>


        <section class="gameHeaderInfos gameSubImgBg" style="border-top: 2px solid {{ game.color }};">


            {# Bandeau gauche: Clip path avec infos #}
            <div class="gameHeaderSection1">

                <div class="gameInfosHeaderTitle" style="background-image: linear-gradient(to right, {{ game.color }}, {{ game.color }}30), url('../img/testMotif1-min.jpg'); background-size:cover;"></div>
                <h3 class="gameSubTitle noMarginBottom gameSubtitleV2">Infos</h3>

                <div class="gameHeaderInfosContent">
                    {# GameId et GameColor pour fav asynch (plutot que dans controller ?) #}
                    <span id="gameId" style="display:none;">{{ game.id }}</span>
                    <span id="gameColor" style="display:none;">{{ game.color }}</span>

                    {# Infos #}
                    <div class="gameHeaderInfosTxt">
                        <span>Éditeur: {{ game.editor }}</span>
                        <span>{{ game.publishDate|date('Y') }}</span>
                        <span>Genre: <a class="underlineLink" href="{{ path('app_genreGames', {'slug': game.genre.slug }) }}">{{ gameGenre }}</a></span>
                    </div>

                    {# Form Notation (Ajax) #}
                    <div class="gameNotationDiv">

                        <div id="notationContent">
                            <div class="rate">
                                <input type="radio" id="star5" name="rate" value="5"/>
                                <label class="starLabel" for="star5" title="text">5 stars</label>
                                <input type="radio" id="star4" name="rate" value="4" />
                                <label class="starLabel" for="star4" title="text">4 stars</label>
                                <input type="radio" id="star3" name="rate" value="3" />
                                <label class="starLabel" for="star3" title="text">3 stars</label>
                                <input type="radio" id="star2" name="rate" value="2" />
                                <label class="starLabel" for="star2" title="text">2 stars</label>
                                <input type="radio" id="star1" name="rate" value="1" />
                                <label class="starLabel" for="star1" title="text">1 star</label>
                            </div>
                            {% if nbrOfNotations > 1 %}
                                <span class="gameNotationLine">Moy: <span id="gameRatingMoyValue">{{ averageRating }}</span>/5  (<span id="gameRatingNbrValue">{{ nbrOfNotations }}</span> votes)</span>
                            {% else %}
                                <span class="gameNotationLine">Moy: <span id="gameRatingMoyValue">{{ averageRating }}</span>/5  (<span id="gameRatingNbrValue">{{ nbrOfNotations }}</span> vote)</span>
                            {% endif %}
                        </div>

                        <div id="spinningLoaderNotation" class="spinner spinningLoader" style="left: 43%;">
                            <div class="lds-roller" style="transform:scale(0.9);">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>


            {# BackgroundImage et fav ici? #}
            <div class="gameHeaderSection2" style="border: 1px solid {{ game.color }}; background-image: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(35,35,35,0.995) 69%), url('{{asset("img/games/headerBackground/" ~ game.subBanner)}}');">


                {# Titre absolute #}
                <div class="gameTitle" style="position:absolute; color:white; z-index:999;">
                    <h2 style="text-shadow: -1px -1px 0 {{ game.color }}, 1px -1px 0 {{ game.color }}, -1px 1px 0 {{ game.color }}, 1px 1px 0 {{ game.color }};">{{ game.title }}</h2>
                </div>


                {# Bouton Favoris state (Btn toggle Async) #}
                <div style="position:relative;">
                    {% if app.user %}
                        {% if isFavorited %}
                            <span id="favGameBtn" class="favButton" style="border-top: 1px solid {{ game.color }}; border-bottom: 1px solid {{ game.color }};">
                                
                                <div id="spinningLoader" class="spinner spinningLoader" style="left:61%; top:46%;">
                                    <div class="lds-roller" style="transform:scale(0.8);">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                </div>

                                <i style="color:{{ game.color }};" id="favHeartIcon" class="fa-solid fa-heart favIcon"></i>

                            </span>
                        {% else %}
                            <span id="favGameBtn" class="favButton">

                                <div id="spinningLoader" class="spinner spinningLoader" style="left:61%; top:46%;">
                                    <div class="lds-roller" style="transform:scale(0.8);">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                </div>

                                <i id="favHeartIcon" class="fa-regular fa-heart favIcon"></i>

                            </span>
                        {% endif %}
                    {% else %}
                        <span id="favGameBtn" class="favButton">
                            <i class="fa-regular fa-heart favIcon"></i>
                        </span>
                    {% endif %}

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

                </div>

            </div>

        </section>




        {# Notation Game async #}
        <script>

            {% if userGameNotation %}
                const notationValue = {{ userGameNotation.note }};
                if (notationValue !== null) {
                    document.getElementById("star" + notationValue).checked = true;
                }
            {% endif %}

            const rate = document.querySelectorAll('.rate input');

            rate.forEach((radio) => {
            radio.addEventListener('click', (event) => {

                document.getElementById('notationContent').style.opacity = "0";
                document.getElementById('spinningLoaderNotation').classList.toggle('spinningLoader');

                {% if app.user %}

                    const rating = event.target.value;
                    const id = {{ game.id }};
                    fetch('/updateNotation/' + id + '/' + rating, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                    })
                    .then(response => response.json())
                    .then(data => {

                        document.getElementById('spinningLoaderNotation').classList.toggle('spinningLoader');
                        document.getElementById('notationContent').style.opacity = "1";

                        if (data.success) {
                            if (data.eraseNote) {
                                window.FlashMessage.success('Votre note a bien été effacée');
                                // Problème si re-set une note apres annulation (pas doré): .style prioritaire
                                document.querySelectorAll('.rate > input:checked ~ label').forEach((label) => {
                                    // label.style.color = "#ccc";
                                    label.classList.add('greyed');
                                })
                            }
                            else {
                                window.FlashMessage.success('Votre note a bien été prise en compte');
                            }
                            document.getElementById('gameRatingMoyValue').innerHTML = data.newAverageNote;
                            document.getElementById('gameRatingNbrValue').innerHTML = data.newVoteCount;
                        } else {
                            window.FlashMessage.error('Il y a eu un problème lors de l\'envoi de votre note');
                        }
                    
                    })
                    .catch(error => {
                    alert('Erreur lors de la communication avec le serveur : ' + error.message);
                    });

                {% else %} 
                    window.FlashMessage.error('Vous devez être connecté pour pouvoir noter un jeu');
                {% endif %}
            });
            });

        </script>





        {# Section Groupe #}
        <section class="sectionContainer sectionContainerGameDetail" style="margin-top: 40px; border: 1px solid {{ game.color }}50; border-top:2px solid {{ game.color }}; border-left:1px solid {{ game.color }};">
            
            <a href="{{ path('app_groupList',{'gameIdFrom': game.id}) }}">
                <div>
                    <div class="gameTopicsSubTitleBg" style="background-image: linear-gradient(to right, {{ game.color }}, #ffffffa8);"></div>
                    <h3 class="gameSubTitle noMarginBottom" style="color:{{ game.fontColor }}">
                        <i class="fa-solid fa-users-between-lines"></i> Teams
                    </h3>
                </div>
            </a>

            <div class="sectionContent">

                <div class="sectionTeamContent">
                    <a href="{{ path('app_groupList', {'gameIdFrom': game.id}) }}">
                        <div class="gameTeamBtn gameTeamBtn1" style="border-color:{{ game.color }}" onmouseover="this.style.backgroundColor = '{{ game.color }}';" onmouseout="this.style.backgroundColor = 'rgb(69 69 69)';">
                            <div class="teamBtnBg" style="background-color: {{ game.color }}"></div>
                            <span style="position:relative; z-index:10;">Rejoindre une Team ({{ nbrOfTeams }})</span>
                        </div>
                    </a>
                    {% if app.user %}
                    <a href="{{ path('app_createGroup', {'gameIdFrom': game.id}) }}">
                        <div class="gameTeamBtn gameTeamBtn2" style="border-color:{{ game.color }}" onmouseover="this.style.backgroundColor = '{{ game.color }}';" onmouseout="this.style.backgroundColor = 'rgb(69 69 69)';">
                            <div class="teamBtnBg" style="background-color: {{ game.color }}"></div>
                            <span style="position:relative; z-index:10;">Créer une Team</span>
                        </div>
                    </a>
                    {% else %}
                    <a href="{{ path('app_login') }}">
                        <div class="gameTeamBtn gameTeamBtn2" style="border-color:{{ game.color }}" onmouseover="this.style.backgroundColor = '{{ game.color }}';" onmouseout="this.style.backgroundColor = 'rgb(69 69 69)';">
                            <div class="teamBtnBg" style="background-color: {{ game.color }}"></div>
                            <span style="position:relative; z-index:10;">Créer une Team</span>
                        </div>
                    </a>
                    {% endif %}
                </div>


                {% if app.user %}

                    <div class="userGameTeamsContainer">
                
                        <h4 style="text-align:center;">Vos Teams</h4>

                        {% if userGameGroups|length > 0 %}

                        <div class="groupListGrid">

                            {% for userGameGroup in userGameGroups %}
                                
                                    
                                <a title='"{{ userGameGroup.title|capitalize }}"' href="{{ path('app_groupDetails', {'groupSlug': userGameGroup.slug } ) }}" style="width:fit-content;position:relative;">

                                    {# Couronne si leader: #}
                                    {% if app.user == userGameGroup.leader %}
                                        <i class="fa-solid fa-crown teamCard-crownLeader"></i>
                                    {% endif %}

                                    <article class="teamCard" style="border-color:{{ userGameGroup.game.color }}60">

                                        <div class="teamCardTextDiv">

                                            <div class="absoluteBg-teamCard" style="background-image:linear-gradient(to top, {{userGameGroup.game.color}}d6, {{userGameGroup.game.color}}), url('../img/testMotif2.jpg'); background-size:cover;"></div>

                                            <span class="teamCardGameTitle" style="background-color:{{ userGameGroup.game.color }}">{{ userGameGroup.game.title }}</span>
                                            
                                            <p class="teamCardTitleV2">{{ userGameGroup.title|capitalize }}</p>

                                            {% if app.user == userGameGroup.leader and userGameGroup.nbrCandidatures > 0 %}
                                                {% if userGameGroup.nbrCandidatures > 1 %}
                                                    <span class="teamCardNbrCandidature">{{ userGameGroup.nbrCandidatures }} candidatures</span>
                                                {% else %}
                                                    <span class="teamCardNbrCandidature">{{ userGameGroup.nbrCandidatures }} candidature</span>
                                                {% endif %}
                                            {% endif %}

                                            <div class="teamCard-members">
                                                <i class="fa-solid fa-user-group"></i> 
                                                <span style="position:relative; top:2px;">{{ userGameGroup.members|length }}/{{ userGameGroup.nbrPlaces }}</span>
                                            </div>

                                            <ul class="teamCard-criterias">
                                                <li>
                                                    {% if userGameGroup.restriction18 %}
                                                        <img src="{{ asset('img/criteria_18.png') }}" style="filter:invert(0.9);" alt="icone interdit aux mineurs">
                                                    {% else %}
                                                        <img src="{{ asset('img/criteria_18.png') }}" style="opacity:0.9;" alt="icone interdit aux mineurs">
                                                    {% endif %}
                                                </li>
                                                <li>
                                                    {% if userGameGroup.restrictionMic %}
                                                        <img src="{{ asset('img/criteria_micro.png') }}" style="filter:invert(0.9);" alt="icone microphone">
                                                    {% else %}
                                                        <img src="{{ asset('img/criteria_micro.png') }}" style="opacity:0.9;" alt="icone microphone">
                                                    {% endif %}
                                                </li>
                                            </ul>

                                        </div>

                                        <div class="teamCardImgWrapper">

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

                                            {# Label si team active (= au moins 1 session moi précédent) #}
                                            {% if userGameGroup.active %}
                                                <span class="teamCard-isActiveLabel">Active</span>
                                            {% endif %}

                                            {# Div effet reflet onHover card #}
                                            <div class="teamCardReflectDiv"></div>

                                        </div>

                                    </article>
                                </a>


                                    

                            {% endfor %}

                        </div>

                        {% else %}
                        <p class="emptyListMsg">Vous n'appartenez à aucune team</p>
                        {% endif %}

                    </div>

                {% else %}

                    <p class="emptyListMsg" style="margin-top:35px;">
                        <a style="text-decoration:underline;" href="{{ path('app_login') }}">Connectez-vous</a> pour accéder à vos teams
                    </p>

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




        {# Ligne "Topics" + Bouton "+Créer" #}
        <section class="sectionContainer sectionContainerGameDetail" style="border: 1px solid {{ game.color }}50; border-top:2px solid {{ game.color }}; border-left:1px solid {{ game.color }};">
        
            <div style="display:inline-flex; width:100%; justify-content:space-between;">
                <a href="{{ path('app_allTopics', {'gameIdFrom': game.id}) }}">
                    <div>
                        <div class="gameTopicsSubTitleBg" style="background-image: linear-gradient(to right, {{ game.color }}, #ffffffa8);"></div>
                        <h3 class="gameSubTitle noMarginBottom" style="color:{{ game.fontColor }}">
                            <i class="fa-solid fa-comment-dots"></i> Topics
                            {# <span class="gameListCount">&nbsp;({{ gameTopicsCount }})</span> #}
                        </h3>
                    </div>
                </a>  
                
                {% if app.user %}
                    <span id="createTopicBtn" class="createButton" style="border-top: 1px solid {{ game.color }}; border-bottom: 2px solid {{ game.color }};" onmouseover="this.style.backgroundColor = '{{ game.color }}';" onmouseout="this.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';"><i class="fa-solid fa-plus" style="color:{{ game.color }}"></i>&nbsp;Créer</span>
                {% else %}
                    <a href="{{ path('app_login') }}" class="linkFixPosition"><span class="createButton" style="border-top: 1px solid {{ game.color }}; border-bottom: 2px solid {{ game.color }};" onmouseover="this.style.backgroundColor = '{{ game.color }}';" onmouseout="this.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';"><i class="fa-solid fa-plus" style="color:{{ game.color }}"></i>&nbsp;Créer</span></a>
                {% endif %}
                
            </div>


            <div class="sectionContent">
                {# Form d'ajout caché Topic, proc JS bouton #}
                <div id="createTopicForm" class="notDisplayed"> 

                    {{ form_start(formAddTopic, {'attr': {'id': 'form_add_topic'}}) }}

                        <div class="my-custom-class-for-errors">
                            {{ form_errors(formAddTopic) }}
                        </div>

                        <div style="position:relative; margin: 5px auto;">
                            <div class="labelSpan" style="width:100%; display:inline-flex; align-items: center;">
                                {{ form_label(formAddTopic.title, 'Titre')}}
                                <p id="charCountMsg" style="color:#ff1c1c; font-weight:bold;"> (au moins 5 mots)</p>
                                <span id="vulgarityTopicWarning" style="color:#ff1c1c; font-weight:bold; font-size:0.92em; display:none; font-family:'K2D',sans-serif;">
                                    <i class="fa-solid fa-triangle-exclamation"></i>
                                    &nbsp;Vulgarité
                                </span>
                            </div>
                            {{ form_widget(formAddTopic.title) }} 
                        </div>

                        <div style="position:relative; margin: 5px auto;">
                            <span class="labelSpan" style="width:100%;">{{ form_label(formAddTopic.firstMsg, 'Introduction')}}</span>
                            {{ form_widget(formAddTopic.firstMsg) }} 
                        </div>

                        <div style="position:relative; width:100%; display:inline-flex; border-top:1px solid #80808042;">
                            <span class="submitButton" style="margin: 15px auto;">{{ form_widget(formAddTopic.submit, { 'label': 'Publier' }) }}</span>
                        </div>

                        {# A voir: CSRF protection #}
                        {{ form_widget(formAddTopic._token) }}
                    {{ form_end(formAddTopic) }}

                    {# Spinning loader #}
                    <div id="spinningLoaderTopicForm" class="spinner spinningLoader" style="z-index:9999; transform:translate(-50%, -50%) scale(1.5);">
                        <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_topic').addEventListener('submit', function() {
                            document.getElementById('form_add_topic').style.opacity = "0.3";
                            document.getElementById('topic_submit').disabled = true;
                            document.getElementById('spinningLoaderTopicForm').classList.toggle('spinningLoader');
                        })
                    </script>
                    
                </div>



                {# Script vérif Topic Front 5 mots minimum #}
                <script>
                    document.getElementById('topic_submit').disabled = true;

                    let charContMsg = document.querySelector("#charCountMsg");
                    let textInput = document.querySelector('#topic_title');

                    textInput.addEventListener("input", function() {

                        let text = textInput.value;

                        const countWords = (text) => {
                            const words = text.split(' ');

                            let count = 0;
                            for (let i = 0; i < words.length; i++) {
                                if (words[i] !== '') {
                                    count++;
                                    if(count < 5) {
                                        charContMsg.style.color = "#ff1c1c";
                                        document.getElementById('topic_submit').disabled = true;
                                    }
                                    else {
                                        charContMsg.style.color = "#00be00";
                                        document.getElementById('topic_submit').disabled = false;
                                    }
                                }
                            }
                            return count;
                        };

                        countWords(text);

                    })
                </script>

                {# Liste des Topics #}
                {% if gameTopics|length > 0 %}

                    <div class="listContainer topicList marginTop gameTopicList">

                        {% for topic in gameTopics %}
                            <a href="{{ path('app_topicDetail', {'slug': topic.slug}) }}">
                                {# Faire une div BG absolute pour chaque card avec clipPath anim onmouseover #}
                                <div class="topicCard" style="border-bottom: 4px solid {{ game.color }}" onmouseover="" onmouseout="">
                                    <img class="tinyLogo" src="{{ asset('img/games/tinyLogo/' ~ topic.game.tinyLogo) }}" alt="logo du jeu {{ topic.game.title }}" />
                                    <span class="topicTitle">{{ topic.title|capitalize }}</span>
                                    <div class="topicCardSubInfos">
                                        {# Sticker NEW #}
                                        {% if app.user and topic.publishDate > app.user.previousCo %}
                                            <span class="stickerNew" style="color: {{ game.color }}"><i class="fa-solid fa-fire fa-beat-fade"></i> new</span>
                                        {% endif %}

                                        <span class="topicCardPublishDate">{{ time_diff(topic.publishDate) }}</span>
                                        {% if topic.topicPostsCount == 0 %}
                                            <span class="topicSubMsgCount" style="opacity:0.5;">{{ topic.topicPostsCount }} <i class="fa-solid fa-message msgIconColor"></i></span>
                                        {% else %}
                                            <span class="topicSubMsgCount">{{ topic.topicPostsCount }} <i class="fa-solid fa-message msgIconColor"></i></span>
                                        {% endif %}
                                    </div>
                                </div>
                            </a>
                        {% endfor %}
                        
                        <span class="seeAllRedirect">
                            <a href="{{ path('app_allTopics', {'gameIdFrom': game.id}) }}">Tout voir  <i class="fa-solid fa-chevron-right"></i></a>
                        </span>

                    </div>

                {% else %}
                        
                    <p class="emptyListMsg">Aucun topic pour le moment</p>

                {% endif %}

            </div>

        </section>





        {# Section Média #}
        <section class="sectionContainer sectionContainerGameDetail" style="border: 1px solid {{ game.color }}50; border-top:2px solid {{ game.color }}; border-left:1px solid {{ game.color }};">
        
            <div style="display:inline-flex; width:100%; justify-content:space-between;">
                
                <a href=" {{ path('app_allMedias', {'gameIdFrom': game.id}) }}">
                    <div>
                        <div class="gameTopicsSubTitleBg" style="background-image: linear-gradient(to right, {{ game.color }}, #ffffffa8);"></div>
                        <h3 class="gameSubTitle noMarginBottom" style="color:{{ game.fontColor }}">
                            <i class="fa-solid fa-photo-film"></i> Medias
                            {# <span class="gameListCount">&nbsp;({{ gameMediasCount }})</span> #}
                        </h3>
                    </div>
                </a>
                                    
                {% if app.user %}
                    <span id="createMediaBtn" class="createButton" style="border-top: 1px solid {{ game.color }}; border-bottom: 2px solid {{ game.color }};" onmouseover="this.style.backgroundColor = '{{ game.color }}';" onmouseout="this.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';"><i class="fa-solid fa-plus" style="color:{{ game.color }}"></i>&nbsp;Créer</span>
                {% else %}
                    <a href="{{ path('app_login') }}" class="linkFixPosition"><span class="createButton" style="border-top: 1px solid {{ game.color }}; border-bottom: 2px solid {{ game.color }};" onmouseover="this.style.backgroundColor = '{{ game.color }}';" onmouseout="this.style.backgroundColor = 'rgb(69 69 69)';"><i class="fa-solid fa-plus" style="color:{{ game.color }}"></i>&nbsp;Créer</span></a>
                {% endif %}
            </div>


            <div class="sectionContent sectionContentMediaDiv">

                {# Form d'ajout caché Media, proc JS bouton #}
                <div id="createMediaForm" class="notDisplayed"> 

                    {{ form_start(formAddMedia, {'attr': {'id': 'form_add_media'}}) }}

                        <div class="my-custom-class-for-errors">
                            {{ form_errors(formAddMedia) }}
                        </div>

                        <div style="position:relative; margin: 5px auto;">
                            <div class="labelSpan" style="width:100%; display:inline-flex; align-items: center;">
                                {{ form_label(formAddMedia.title, 'Titre')}}
                                <p id="charCountMsgMedia" style="color:#ff1c1c; font-weight:bold;"> (au moins 5 mots)</p>
                                <span id="vulgarityMediaWarning" style="color:#ff1c1c; font-weight:bold;font-size:0.92em; display:none; font-family:'K2D',sans-serif;">
                                    <i class="fa-solid fa-triangle-exclamation"></i>
                                    &nbsp;Vulgarité
                                </span>
                            </div>
                            {{ form_widget(formAddMedia.title) }} 
                        </div>

                        <div style="position:relative; margin: 5px auto;">
                            <span class="labelSpan" style="width:100%;">{{ form_label(formAddMedia.url, 'Choisissez un fichier')}}<span class="fileUploadCriteria"><span id="extensionCriteria">(.png .jpg .gif .jpeg)</span> <span id="fileCriteria">(5MB)</span></span></span>
                            {{ form_widget(formAddMedia.url) }} 
                        </div>

                        {# Apercu du média à publier #}
                        <div id="preview-container" style="max-width: 350px; margin: 25px auto;">
                            <span id="mediaPreviwTitle" style="display:none;">Aperçu :</span>
                            <div  id="previewMediaCard" class="previewMediaCard" style="background-color:{{ game.color }}; position:relative;">
                                <div id="mediaCardHeader" >
                                    {# Contenyu ajouté JS #}
                                </div>




                            </div>

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

                        <div style="position:relative; width:100%; display:inline-flex; border-top:1px solid #80808042;">
                            <span class="submitButton" style="margin: 15px auto;">{{ form_widget(formAddMedia.submit, { 'label': 'Publier' }) }}</span>
                        </div>

                        {{ form_widget(formAddMedia._token) }}
                    {{ form_end(formAddMedia) }}



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


                {# Script aperçu media upload #}
                <script>
                    // Sélectionnez votre élément d'entrée de type fichier (input file) trest
                    const input = document.getElementById('media_url');

                    // Ajoutez un écouteur d'événements "change" sur l'élément d'entrée
                    input.addEventListener('change', (e) => {
                        // Obtenez le fichier sélectionné
                        const file = e.target.files[0];

                        if (file && (file.name.split('.').pop() == "png" || file.name.split('.').pop() == "jpg" || file.name.split('.').pop() == "gif" || file.name.split('.').pop() == "jpeg")) {

                            // Créez un objet FileReader
                            const reader = new FileReader();

                            // Définissez l'événement onload du FileReader
                            reader.onload = (e) => {
                                document.getElementById('mediaPreviwTitle').style.display = "block";

                                // Créez une balise d'image pour afficher la prévisualisation
                                const img = document.createElement('img');
                                img.src = e.target.result;
                                img.style.width = "100%";
                                img.style.backgroundColor = "var(--background-color)";
                                img.style.border = "1px solid {{ game.color }}";

                                // Ajoutez l'image prévisualisée à un élément de votre choix dans le DOM
                                const previewContainer = document.getElementById('mediaCardHeader');
                                previewContainer.innerHTML = '';
                                // document.getElementById('mediaCardHeader').style.borderWidth = "1px";

                                previewContainer.prepend(img);

                                const previewMediaCardHeader = document.createElement('div');
                                previewMediaCardHeader.classList.add('mediaCardHeader');
                                previewMediaCardHeader.style.border = "1px solid {{ game.color }}";
                                previewMediaCardHeader.style.borderBottom = "3px solid {{ game.color }}";
                                previewMediaCardHeader.style.borderTopLeftRadius = "3px";
                                previewMediaCardHeader.style.borderTopRightRadius = "3px";

                                const previewMediaCardLogo = document.createElement('img');
                                previewMediaCardLogo.classList.add('tinyLogoMedia');
                                previewMediaCardLogo.src = "../img/games/tinyLogo/{{ game.tinyLogo }}";
                                const imgDiv = document.createElement('div');
                                imgDiv.classList.add('tinyLogoDiv');
                                imgDiv.prepend(previewMediaCardLogo);
                                previewMediaCardHeader.prepend(imgDiv);

                                const previewMediaTitle = document.createElement('span');
                                previewMediaTitle.id = 'mediaTitle';
                                previewMediaTitle.classList.add('mediaTitle');
                                previewMediaTitle.textContent = document.getElementById('media_title').value;
                                previewMediaCardHeader.append(previewMediaTitle);

                                const previewMediaDummySubSection = document.createElement('div');
                                previewMediaDummySubSection.classList.add('mediaCardStatsDiv');
                                previewMediaDummySubSection.innerHTML = '<div class="inline mediaSubLikeDiv"><span value="0"> 0 </span><i class="likeMedia fa-regular fa-circle-up"></i></div><span style="opacity:0.5;" class="mediaSubPostsDiv">0 <i class="fa-solid fa-message msgIconColor" style="color:grey;"></i></span>'

                                previewContainer.prepend(previewMediaCardHeader);

                                previewContainer.append(previewMediaDummySubSection);
                            };

                            // Lisez le contenu du fichier en tant que données URL
                            reader.readAsDataURL(file);
                        }
                        else {
                            const previewContainer = document.getElementById('mediaCardHeader');
                            previewContainer.innerHTML = '';
                            const notValidFileMsg = document.createElement('span');
                            notValidFileMsg.classList.add('emptyListMsg');
                            notValidFileMsg.textContent = "Le fichier uploadé n'a pas une extension valide";
                            previewContainer.append(notValidFileMsg);
                        }
                    });

                    // Mise à jour du titre preview à l'input
                    const inputTitle = document.getElementById('media_title');
                    inputTitle.addEventListener('input', function() {
                        if (document.getElementById('mediaTitle') !== null) {
                            document.getElementById('mediaTitle').innerText = inputTitle.value;
                        }
                    })

                </script>



                {% if gameMedias|length > 0 %}
                
                    <div class="masonry-grid">

                        {% for media in gameMedias %}

                            <article class="grid-item" style="height:fit-content;">

                                {% if app.user and app.user.autoPlayGifs %}
                                <a href="{{ path('app_mediaDetail', {'slug': media.slug}) }}">
                                {% endif %}
                                    
                                    <div class="mediaCard" style="background-color:{{ media.game.color }};">

                                        {% if app.user and not app.user.autoPlayGifs %}
                                        <a href="{{ path('app_mediaDetail', {'slug': media.slug}) }}">
                                        {% elseif app.user is null %}
                                        <a href="{{ path('app_mediaDetail', {'slug': media.slug}) }}">
                                        {% endif %}

                                        <div class="mediaCardHeader" style="border-bottom: 3px solid {{ game.color }}">
                                            <div class="tinyLogoDiv">
                                                <img class="tinyLogoMedia" src="{{ asset('img/games/tinyLogo/' ~ media.game.tinyLogo) }}" alt="logo du jeu {{ media.game.title }}" />
                                            </div>
                                            <span class="mediaTitle">{{ media.title|capitalize }}</span>
                                            {# Sticker NEW #}
                                            {% if app.user and media.publishDate > app.user.previousCo %}
                                                <span class="stickerNew stickerNewMedia" style="color: {{ game.color }}"><i class="fa-solid fa-fire fa-beat-fade"></i> new</span>
                                            {% endif %}
                                        </div>
                                        {% if app.user and not app.user.autoPlayGifs %}
                                        </a>
                                        {% elseif app.user is null %}
                                        </a>
                                        {% endif %}

                                        {# Gif autoplay=false si paramètre user #}
                                        {% if app.user %}
                                            {% if not app.user.autoPlayGifs %}
                                                <img data-gifffer="{{ asset("img/uploads/" ~ media.url) }}" data-gifffer-alt="media" class="mediaImg" alt="media publié" />
                                            {% else %}
                                                <img src="{{ asset("img/uploads/" ~ media.url) }}" alt="media" class="mediaImg" alt="media publié" />
                                            {% endif %}
                                        {% else %}
                                            <img src="{{ asset("img/uploads/" ~ media.url) }}" alt="media" class="mediaImg" alt="media publié" />
                                        {% endif %}
                                        
                                    </div>

                                {% if app.user and app.user.autoPlayGifs %}
                                </a>
                                {% endif %}


                                {# Upvote/downvote média + score + nbrPosts #}
                                <div class="mediaCardStatsDiv">

                                    {# Pas opti: bloucle sur tous les likes du post pour savoir si liké (boucle dans boucle) #}
                                    {% set liked = "" %}
                                    {% if app.user %}
                                        {% for upvote in media.UserUpvote %}
                                            {% if upvote == app.user %}
                                                {% set liked = "upBtnLiked" %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}


                                    
                                    <div class="inline mediaSubLikeDiv" mediaId={{ media.id }}>
                                        <span id="countLikesMedia{{ media.id }}" value="{{ media.upvoteCount }}"> {{ media.upvoteCount }} </span>
                                        <i mediaId={{ media.id }} class="likeMedia fa-regular fa-circle-up {{ liked }}"></i>
                                    </div>
                                
                                    {% if media.mediaPostsCount == 0 %}
                                        <a href="{{ path('app_mediaDetail', {'slug':media.slug}) }}" class="mediaSubPostsDiv">
                                            <div class="inline" style="opacity:0.7;">
                                                {{ media.mediaPostsCount }} 
                                                <i class="fa-solid fa-message msgIconColor msgIconColorGreyed"></i>
                                            </div>
                                        </a>
                                    {% else %}
                                        <a href="{{ path('app_mediaDetail', {'slug':media.slug}) }}" class="mediaSubPostsDiv">
                                            <div class="inline">
                                                {{ media.mediaPostsCount }} 
                                                <i class="fa-solid fa-message msgIconColor"></i>
                                            </div>
                                        </a>
                                    {% endif %}

                                </div>

                            </article>

                        {% endfor %}

                    </div>


                    <span class="seeAllRedirect">
                        <a href="{{ path('app_allMedias', {'gameIdFrom': game.id}) }}">Tout voir  <i class="fa-solid fa-chevron-right"></i></a>
                    </span>

                {% else %}
                    
                    <p class="emptyListMsg">Aucun média pour le moment</p>

                {% endif %}


                {# Masonry JS Medias (permet de rendre responsive entre autre) #}
                <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
                {# imagesLoaded JS #}
                <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>

                <script>

                    $(document).ready(function() {
                        var $gridItems = $('.grid-item');
                        
                        $gridItems.imagesLoaded(function() {
                            setTimeout(function() {
                                console.log('imagesLoaded');
                                $('.masonry-grid').masonry({
                                    itemSelector: '.grid-item',
                                    columnWidth: '.grid-item',
                                    gutter: 15, // Adjust the gutter size as needed
                                });
                            }, 500) 
                        });
                    });
                    
                </script>

            </div>

        </section>
        


        {# // Adaptation couleur borderBottom HeaderFixed #}
        <script>
            {% if app.user %}
                document.getElementsByClassName('profilIcon')[0].style.color = "{{game.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 = "{{game.color}}";

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



        {# Script vérif fileExtension et fileSize #}
        <script>

            var textCriteria = false;
            var fileExtCriteria = false;
            var fileSizeCriteria = false;

            let fileInput = document.getElementById('media_url');
            fileInput.addEventListener('change', function(event) {
                var uploadedFile = event.target.files[0];
                const maxFileSize = 5 * 1024 * 1024; // 5 MB 

                if (uploadedFile && uploadedFile.size > maxFileSize) {
                    // event.target.value = ''; // On supprimer le fichier de l'input
                    document.getElementById('fileCriteria').style.color = 'red';
                    document.getElementById('fileCriteria').innerHTML = "( > 5 MB <i class='fa-solid fa-triangle-exclamation'></i> )";
                    fileSizeCriteria = false;
                }
                else {
                    document.getElementById('fileCriteria').style.color = '#00c600';
                    document.getElementById('fileCriteria').innerHTML = "( 5 MB <i class='fa-solid fa-check'></i> )";
                    fileSizeCriteria = true;
                }

                uploadedFileExt = getFileExtension(uploadedFile.name);

                const allowedExtensions = ['png', 'jpg', 'jpeg', 'gif'];

                if (allowedExtensions.includes(uploadedFileExt.toLowerCase())) {
                    document.getElementById('extensionCriteria').style.color = '#00c600';
                    document.getElementById('extensionCriteria').innerHTML = "( .png .jpg .gif .jpeg <i class='fa-solid fa-check'></i> )";
                    fileExtCriteria = true;
                }
                else {
                    document.getElementById('extensionCriteria').style.color = '#ff1c1c';
                    document.getElementById('extensionCriteria').innerHTML = "( .png .jpg .gif .jpeg <i class='fa-solid fa-triangle-exclamation'></i> )";
                    fileExtCriteria = false;        
                }
            });

            function getFileExtension(filename) {
                return filename.split('.').pop();
            }


            {# Script vérif Front 5 mots minimum #}
            let charContMsg2 = document.querySelector("#charCountMsgMedia");
            let textInput2 = document.querySelector('#media_title');

            textInput2.addEventListener("input", function() {

                let text = textInput2.value;

                const countWords = (text) => {
                    const words = text.split(' ');

                    let count = 0;
                    for (let i = 0; i < words.length; i++) {
                        if (words[i] !== '') {
                            count++;
                            if(count < 5) {
                                charContMsg2.style.color = "#ff1c1c";
                                textCriteria = false;
                            }
                            else {
                                charContMsg2.style.color = "#00be00";
                                textCriteria = true;
                            }
                        }
                    }
                    return count;
                };

                countWords(text);

            })







            // disable du bouton submit si les critères ne sont pas remplis
            document.getElementById('media_submit').disabled = true;

            textInput2.addEventListener("input", function() {
                if (textCriteria && fileExtCriteria && fileSizeCriteria) {
                    document.getElementById('media_submit').disabled = false;
                }
                else {
                    document.getElementById('media_submit').disabled = true;
                }
            });
            fileInput.addEventListener("change", function() {
                if (textCriteria && fileExtCriteria && fileSizeCriteria) {
                    document.getElementById('media_submit').disabled = false;
                }
                else {
                    document.getElementById('media_submit').disabled = true;
                }
            });
        </script>



        {# (JS) Show/Hide form addTopic/addMedia Btn #}
        <script>
                document.querySelector('#createTopicBtn').addEventListener('click', function() {
                    document.querySelector('#createTopicForm').classList.toggle("notDisplayed");
                    if (document.getElementById('createTopicForm').classList.contains("notDisplayed")) {
                        document.querySelector('#createTopicBtn').innerHTML = '<i class="fa-solid fa-plus" style="color:{{ game.color }}"></i>&nbsp;Créer';
                    }
                    else {
                        document.querySelector('#createTopicBtn').innerHTML = '<i class="fa-solid fa-minus" style="color:{{ game.color }}"></i>&nbsp;Annuler';
                    }
                });

                document.querySelector('#createMediaBtn').addEventListener('click', function() {
                    console.log("test");
                    document.querySelector('#createMediaForm').classList.toggle("notDisplayed");
                    if (document.getElementById('createMediaForm').classList.contains("notDisplayed")) {
                        document.querySelector('#createMediaBtn').innerHTML = '<i class="fa-solid fa-plus" style="color:{{ game.color }}"></i>&nbsp;Poster';
                    }
                    else {
                        document.querySelector('#createMediaBtn').innerHTML = '<i class="fa-solid fa-minus" style="color:{{ game.color }}"></i>&nbsp;Annuler';
                    }
                });

        </script>




        {# Script de Warning titres Topic/Media Front #} 
        {# On censure pas mais proc warning (bloquand backend) #}
        <script>

            // Array mots censurés
            let censuresArray = [];
            {% for censure in censures %}
                censuresArray.push("{{ censure.word }}");
            {% endfor %}

            // A chaque input, check si il y a vulgarité et censorise
            document.getElementById('topic_title').addEventListener('input', function() {
            
                // Découpe de l'input en array de mot (dans l'ordre)
                let inputArray = document.getElementById('topic_title').value.split(" ");

                // Si aucun mot censuré (display none du warning)
                const noneCensored = inputArray.every(element => !censuresArray.includes(element.toLowerCase()) || element.startsWith('\\') );
                if (noneCensored) {
                    document.getElementById('vulgarityTopicWarning').style.display = "none";
                }
                else {
                    document.getElementById('vulgarityTopicWarning').style.display = "block";
                }
            })

            // A chaque input, check si il y a vulgarité et censorise
            document.getElementById('media_title').addEventListener('input', function() {
            
                // Découpe de l'input en array de mot (dans l'ordre)
                let inputArray = document.getElementById('media_title').value.split(" ");

                // Si aucun mot censuré (display none du warning)
                const noneCensored = inputArray.every(element => !censuresArray.includes(element.toLowerCase()) || element.startsWith('\\') );
                console.log('TEST input ARRAY: ' + inputArray);
                console.log('TEST censore ARRAY: ' + censuresArray);
                if (noneCensored) {
                    console.log('proc display:none');
                    document.getElementById('vulgarityMediaWarning').style.display = "none";
                }
                else {
                    document.getElementById('vulgarityMediaWarning').style.display = "block";
                }
            })


        </script>

    </main>


    <script>
        window.onload = function() {
            document.getElementById('authenticationDiv').style.color = "white";
        }
    </script>

{% endblock %}