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

{% block title %}Tous les jeux{% endblock %}
{% block meta_description %}
    Parcourez la liste des jeux
{% endblock %}

{% block body %}

    <header class="globalBanner" style="background: url('{{ asset('img/banner1.jpg') }}' )">

        <div style="display:inline-flex;">
            <a href="{{ path('app_home') }}"><img src="{{ asset('img/logoSquadForge_v3.png') }}" 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 navActive">jeux</a>
            {% if app.user %}
                <a href="{{ path('app_userGroups') }}" class="teamsNav caps">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>
            {% else %}
                <a href="{{ path('app_allGroupList') }}" class="teamsNav caps">teams</a>
            {% endif %}
            {% if app.user and "ROLE_MODO" in app.user.roles %}
            
                <a href="{{ path('app_moderationDashboard') }}" 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>

        {# 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"></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"></div>
    {% endif %}



    <main class="main" style="margin: 20px auto 100px auto;">

        <section class="gamesListHeaderLine">
            <h2 class="pageTitle pageTitleGames">Parcourir les jeux</h2>

            {# Form Search asynchrone (Ajax JS) #}
            <form id="search-form" action="{{ path('app_search') }}" method="GET">
                <input type="text" id="search-input" name="query" class="form-control" placeholder="Rechercher...">
                <i id="searchFormLoupe" class="fa-solid fa-magnifying-glass"></i>
            </form>
        </section>

        <script>
            window.onload = function() {

                const searchForm = document.querySelector('#search-form');
                const searchInput = document.querySelector('#search-input');
                const searchResults = document.querySelector('#search-results');

                searchInput.addEventListener('keyup', (event) => {

                    const query = event.target.value.trim();

                    if (query.length >= 1) { // perform search only if query length >= 1

                        // On cache la liste des jeux pendant la recherche
                        document.querySelector('#gamesLists').style.display = "none";
                        document.querySelector('#search-title').style.display = "block";
                        document.querySelector('#search-results').style.display = "inline-flex";

                        const url = searchForm.getAttribute('action') + '?query=' + encodeURIComponent(query);
                        
                        // make AJAX request to server
                        const xhr = new XMLHttpRequest();
                        xhr.open('GET', url);
                        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                        xhr.onload = () => {
                            if (xhr.status === 200) {
                                // Affichage des résultats sur la page
                                const results = JSON.parse(xhr.responseText);
                                let count = results.length;
                                document.querySelector('#searchResultCount').innerHTML = "(" + count + ")";
                                let html = '';
                                if (count >= 1) {
                                    results.forEach((result) => {

                                        html += 
                                        `<a href="/game/` + result.slug + `">` + 
                                            `<div title="` + result.title + `" class="lp-page3-slideContainer splide__slide">` +
                                                `<svg class="gameSelectedBracketUp">` +
                                                    `<path 
                                                        id="gameSelectedBracketUpPath` + result.id  + `"
                                                        class="gameSelectedBracketUpPath hiddenPhone" 
                                                        d="M 57 82 L 57 58 C 57 53 60 48 66 48 L 67 48 L 266 48 C 274 48 276 51 276 56 L 276 55 L 276 82"
                                                        fill-opacity="0"
                                                        />` +
                                                `</svg>` +

                                                `<div id="lp-page3-slide0` + result.id + `" class="lp-gameCard lp-gameCard-searchResult" style="background-image: linear-gradient(rgba(0, 0, 255, 0.05), rgba(249, 123, 44, 0.5)),url('img/games/headerBackground/` + result.subBanner + `'); background-size:cover;">` + 

                                                    `<span id="lp-gameCardTitle` + result.id + `" value="` + result.title + `" class="lp-gameCardTitleSearch">` + result.title + `</span>` +

                                                `</div>` +

                                                `<svg class="gameSelectedBracketDown">` +
                                                    `<path 
                                                        id="gameSelectedBracketDownPath` + result.id + `"
                                                        class="gameSelectedBracketDownPath hiddenPhone" 
                                                        d="M 57 82 L 57 58 C 57 53 60 48 66 48 L 67 48 L 266 48 C 274 48 276 51 276 56 L 276 55 L 276 82"
                                                        fill-opacity="0"
                                                        />` +
                                                `</svg>` +

                                            `</div>` +
                                        `</a>`;



                                    });
                                    searchResults.innerHTML = html;
                                }
                                else {
                                    searchResults.innerHTML = "<p style='font-style:italic; opacity: 0.8;'>Aucun résultat</p>";
                                }

                            } else {
                                console.error(xhr.statusText);
                            }
                        };
                        xhr.onerror = () => console.error(xhr.statusText);
                        xhr.send();
                    } else {
                        document.querySelector('#search-title').style.display = "none";
                        document.querySelector('#search-results').style.display = "none";
                        document.querySelector('#gamesLists').style.display = "block";
                        searchResults.innerHTML = '';
                    }
                });
            }
        </script>


        <section>
            <h3 id="search-title">Résultats de recherche <span id="searchResultCount" class="gameListCount"></span></h3>

            <div id="search-results">
            </div>
        </section>



        
        <div id="gamesLists">

            {# // Filtres par genres: #}
            <section class="gameFiltersDiv">
                <i class="fa-solid fa-filter gameFilterIcon"></i>
                {# <i class="fa-solid fa-filter-circle-xmark gameFilterIcon"></i> #}
                <ul class="gamesFilterList">
                    <li id="gameFilterFps" class="gameFilterActive">FPS</li>
                    <li id="gameFilterBr" class="gameFilterActive">Battle Royal</li>
                    <li id="gameFilterMoba" class="gameFilterActive">MOBA</li>
                    <li id="gameFilterArcade" class="">Arcade</li>
                </ul>

                <script>

                    var filterFpsBool = true;
                    var filterBrBool = true;
                    var filterMobaBool = true;
                    var filterArcadeBool = false;

                    document.getElementById('gameFilterFps').addEventListener('click', function() {
                        if(document.getElementById('gameFilterFps').classList.contains('gameFilterActive')) {
                            document.getElementById('gameFilterFps').classList.remove('gameFilterActive');
                            document.getElementById('splideFps').style.display = "none";
                            filterFpsBool = false;
                        }
                        else {
                            document.getElementById('gameFilterFps').classList.add('gameFilterActive');
                            document.getElementById('splideFps').style.display = "inline-flex";
                            filterFpsBool = true;
                            // On place la section au top de la liste des genres:
                            document.getElementById('listSections').insertBefore(document.getElementById('splideFps'), document.getElementById('listSections').firstChild);
                        }
                        checkNoFilter()
                    })
                    document.getElementById('gameFilterBr').addEventListener('click', function() {
                        if(document.getElementById('gameFilterBr').classList.contains('gameFilterActive')) {
                            document.getElementById('gameFilterBr').classList.remove('gameFilterActive');
                            document.getElementById('splideBr').style.display = "none";
                            filterBrBool = false;
                        }
                        else {
                            document.getElementById('gameFilterBr').classList.add('gameFilterActive');
                            document.getElementById('splideBr').style.display = "inline-flex";
                            filterBrBool = true;
                            // On place la section au top de la liste des genres:
                            document.getElementById('listSections').insertBefore(document.getElementById('splideBr'), document.getElementById('listSections').firstChild)
                        }
                        checkNoFilter()
                    })
                    document.getElementById('gameFilterMoba').addEventListener('click', function() {
                        if(document.getElementById('gameFilterMoba').classList.contains('gameFilterActive')) {
                            document.getElementById('gameFilterMoba').classList.remove('gameFilterActive');
                            document.getElementById('splideMoba').style.display = "none";
                            filterMobaBool = false;
                        }
                        else {
                            document.getElementById('gameFilterMoba').classList.add('gameFilterActive');
                            document.getElementById('splideMoba').style.display = "inline-flex";
                            filterMobaBool = true;
                            // On place la section au top de la liste des genres:
                            document.getElementById('listSections').insertBefore(document.getElementById('splideMoba'), document.getElementById('listSections').firstChild)

                        }
                        checkNoFilter()
                    })
                    document.getElementById('gameFilterArcade').addEventListener('click', function() {
                        if(document.getElementById('gameFilterArcade').classList.contains('gameFilterActive')) {
                            document.getElementById('gameFilterArcade').classList.remove('gameFilterActive');
                            // document.getElementById('splideArcade').style.display = "none";
                            filterMobaBool = false;
                        }
                        else {
                            document.getElementById('gameFilterArcade').classList.add('gameFilterActive');
                            // document.getElementById('splideArcade').style.display = "inline-flex";
                            filterMobaBool = true;
                             // On place la section au top de la liste des genres:
                            // document.getElementById('listSections').insertBefore(document.getElementById('splideArcade'), document.getElementById('listSections').firstChild)

                        }
                        checkNoFilter()
                    })

                    function checkNoFilter() {
                        console.log(filterFpsBool + ", " + filterBrBool + ", " + filterMobaBool + ", " + filterArcadeBool);
                        if(!filterFpsBool && !filterBrBool && !filterMobaBool && !filterArcadeBool) {
                            document.getElementById('emptyListDiv').style.display = "block";
                        }
                        else {
                            document.getElementById('emptyListDiv').style.display = "none";
                        }
                    }
                    
                </script>

            </section>



            {# // Message si aucun genre selectionné #}
            <div id="emptyListDiv" style="display:none;">
                <span class="emptyListMsg">Choisissez au moins un genre pour afficher des jeux</span>
            </div>

            <div id="listSections">

                {# Liste jeux catégorie "FPS" #}
                <section class="gameList1">
                    <div id="splideFps" class="splide sectionHomeContainerGames splideGames">

                        <a href="{{ path('app_genreGames', {'slug':'fps'}) }}" class="blinkingSectionTitle sectionTitleGames">
                            <div class="gamesGenreTitle"></div>
                            <h3 class="gamesSubTitle noMarginBottom">
                                <i class="fa-solid fa-gun gamesListIcon"></i>
                                <span class="gamesSubtitleTitle"> FPS </span>
                            </h3>
                        </a>

                        {# <div class="lp-page3-containerMaster"> #}

                            {% if fpsGames|length > 0 %}

                                <div class="gamesSplideContainer">
                            
                                    <div class="games-container games-container-phone splide__track"> 

                                        <div class="lp-phone-slpideTrait1"></div>

                                        <div class="splide__list splideListGames">

                                            {% set index = 1 %}

                                            {% for game in fpsGames %}

                                                {# Calcul du nombre de nouveaux Topics/Médias depuis lastConnexion pour chaque jeu favori #}

                                                {% if app.user %}
                                                    {% set newTopicsCount = 0 %}
                                                    {% set newMediasCount = 0 %}

                                                    {% for gameTopic in game.topics %}
                                                        {% if gameTopic.publishDate > app.user.previousCo %}
                                                            {% set newTopicsCount = newTopicsCount + 1 %}
                                                        {% endif %}
                                                    {% endfor %}

                                                    {% for gameMedia in game.media %}
                                                        {% if gameMedia.publishDate > app.user.previousCo %}
                                                            {% set newMediasCount = newMediasCount + 1 %}
                                                        {% endif %}
                                                    {% endfor %}
                                                {% endif %}
                                                {# Fin calcul #}

                                                <a title="{{ game.title }}" class="gameCardLink splide__slide" href="{{ path('app_game', {'slug': game.slug} )}}" style="transform:scale(0.9);">
                                                    <article class="lp-page3-slideContainer">

                                                        <svg class="gameSelectedBracketUp-games">
                                                            <path 
                                                                id="gameSelectedBracketUpPath{{ index }}"
                                                                class="gameSelectedBracketUpPath hiddenPhone" 
                                                                d="M 54 80 L 57 56 C 57 53 60 48 66 48 L 67 48 L 250 48 C 254 48 259 50 258 55 L 258 55 L 255 80"
                                                                {# d="M 57 82 L 57 48 L 66 48 L 267 48 L 276 48 L 276 82" (sharp angles) #}
                                                                fill-opacity="0"
                                                                />
                                                        </svg>

                                                        <div id="lp-page3-slide0{{ index }}" class="games-gameCard" style="background-image: linear-gradient(rgba(0, 0, 255, 0.05), rgba(249, 123, 44, 0.5)),url('{{ asset("img/games/headerBackground/" ~ game.subBanner )}}'); background-size:cover;">
                                                        
                                                            {# Si jeu déjà fav: ptite icone #}
                                                            {% if app.user and game in app.user.favoris %}
                                                                <span class="gameFavoritedLabel">
                                                                    <i class="fa-solid fa-heart"></i>
                                                                </span>
                                                            {% endif %}

                                                            {# Affichage des comptes de newTopics/newMedias #}
                                                            {% if app.user %}
                                                                <div class="newsFavCardDiv newsFavCardDivGameList">
                                                                    {% if newTopicsCount > 0 %}
                                                                        <span class="newTopics newTopicsGameList"><i class="fa-solid fa-fire"></i><span class="newsTopicWord"> Topics</span> {{ newTopicsCount }}</span>
                                                                    {% endif %}
                                                                    
                                                                    {% if newMediasCount > 0 %}
                                                                        <span class="newMedias newMediasGameList"><i class="fa-solid fa-fire"></i><span class="newsTopicWord"> Médias</span> {{ newMediasCount }}</span>
                                                                    {% endif %}
                                                                </div>
                                                            {% endif %}
                                                        
                                                        </div>


                                                        <span id="lp-gameCardTitle{{ index }}" value="{{ game.title }}" class="lp-gameCardTitle-games">{{ game.title }}</span>

                                                        {# only Phone: #}
                                                        <span value="{{ game.title }}" class="lp-gameCardTitlePhone">{{ game.title }}</span>

                                                        <svg class="gameSelectedBracketDown-games">
                                                            <path 
                                                                id="gameSelectedBracketDownPath{{ index }}"
                                                                class="gameSelectedBracketDownPath hiddenPhone" 
                                                                d="M 54 80 L 57 56 C 57 53 60 48 66 48 L 67 48 L 250 48 C 254 48 259 50 258 55 L 258 55 L 255 80"
                                                                {# d="M 57 82 L 57 48 L 66 48 L 267 48 L 276 48 L 276 82" (sharp angles) #}
                                                                fill-opacity="0"
                                                                />
                                                        </svg>

                                                    </article>
                                                </a>

                                                {% set index = index + 1 %}

                                            {% endfor %}

                                            {# Fausse card (pour espacement final, évite la coupure midCard de la dernière card) #}
                                            <a class="gameCardLink splide__slide" style="transform:scale(0.9);">
                                            </a>

                                        </div>

                                        <div class="lp-phone-slpideTrait2"></div>

                                    </div>

                                </div>

                            {% else %}

                                <div class="emptyListMsg" style="display:inline-flex; flex-direction:column; width:100%;">
                                    <span class="gamesListsEmptyMsg">Aucun jeu pour l'instant</span>
                                </div>
                                
                            {% endif %}

                        {# </div> #}

                        {# <div class="gamesListClipPathEnd"></div> #}

                        <a href="{{ path('app_genreGames', {'slug':'fps'}) }}" class="seeAll-gamesList">Voir tout <span>({{ fpsGamesCount }})</span> <i class="fa-solid fa-arrow-right"></i></a>

                    </div>
                </section>


                {# Liste jeux catégorie "MOBA" #}
                <section class="gameList2">
                    <div id="splideMoba" class="splide sectionHomeContainerGames splideGames">

                        <a href="{{ path('app_genreGames', {'slug':'moba'}) }}" class="blinkingSectionTitle sectionTitleGames">
                            <div class="gamesGenreTitle"></div>
                            <h3 class="gamesSubTitle noMarginBottom">
                                <i class="fa-solid fa-gopuram gamesListIcon"></i>
                                <span class="gamesSubtitleTitle"> MOBA </span>
                            </h3>
                        </a>

                        {# <div class="lp-page3-containerMaster"> #}

                            {% if mobaGames|length > 0 %}

                                <div class="gamesSplideContainer">
                            
                                    <div class="games-container games-container-phone splide__track"> 

                                        <div class="lp-phone-slpideTrait1"></div>

                                        <div class="splide__list splideListGames">

                                            {% set index = 1 %}

                                            {% for game in mobaGames %}

                                                <a title="{{ game.title }}" class="gameCardLink splide__slide" href="{{ path('app_game', {'slug': game.slug} )}}" style="transform:scale(0.9);">
                                                    <article class="lp-page3-slideContainer">

                                                        <svg class="gameSelectedBracketUp-games">
                                                            <path 
                                                                id="gameSelectedBracketUpPath{{ index }}"
                                                                class="gameSelectedBracketUpPath hiddenPhone" 
                                                                d="M 54 80 L 57 56 C 57 53 60 48 66 48 L 67 48 L 250 48 C 254 48 259 50 258 55 L 258 55 L 255 80"
                                                                {# d="M 57 82 L 57 48 L 66 48 L 267 48 L 276 48 L 276 82" (sharp angles) #}
                                                                fill-opacity="0"
                                                                />
                                                        </svg>

                                                        <div id="lp-page3-slide0{{ index }}" class="games-gameCard" style="background-image: linear-gradient(rgba(0, 0, 255, 0.05), rgba(249, 123, 44, 0.5)),url('{{ asset("img/games/headerBackground/" ~ game.subBanner )}}'); background-size:cover;">
                                                        
                                                            {# Si jeu déjà fav: ptite icone #}
                                                            {% if app.user and game in app.user.favoris %}
                                                                <span class="gameFavoritedLabel">
                                                                    <i class="fa-solid fa-heart"></i>
                                                                </span>
                                                            {% endif %}
                                                        
                                                        </div>

                                                        <span id="lp-gameCardTitle{{ index }}" value="{{ game.title }}" class="lp-gameCardTitle-games">{{ game.title }}</span>

                                                        {# only Phone: #}
                                                        <span value="{{ game.title }}" class="lp-gameCardTitlePhone">{{ game.title }}</span>

                                                        <svg class="gameSelectedBracketDown-games">
                                                            <path 
                                                                id="gameSelectedBracketDownPath{{ index }}"
                                                                class="gameSelectedBracketDownPath hiddenPhone" 
                                                                d="M 54 80 L 57 56 C 57 53 60 48 66 48 L 67 48 L 250 48 C 254 48 259 50 258 55 L 258 55 L 255 80"
                                                                {# d="M 57 82 L 57 48 L 66 48 L 267 48 L 276 48 L 276 82" (sharp angles) #}
                                                                fill-opacity="0"
                                                                />
                                                        </svg>

                                                    </article>
                                                </a>

                                                {% set index = index + 1 %}

                                            {% endfor %}

                                            {# Fausse card (pour espacement final, évite la coupure midCard de la dernière card) #}
                                            <a class="gameCardLink splide__slide" style="transform:scale(0.9);">
                                            </a>

                                        </div>

                                        <div class="lp-phone-slpideTrait2"></div>

                                    </div>

                                </div>

                            {% else %}

                                <div class="emptyListMsg" style="display:inline-flex; flex-direction:column; width:100%;">
                                    <span class="gamesListsEmptyMsg">Aucun jeu pour l'instant</span>
                                </div>
                                
                            {% endif %}

                        {# </div> #}

                        {# <div class="gamesListClipPathEnd"></div> #}

                        <a href="{{ path('app_genreGames', {'slug':'moba'}) }}" class="seeAll-gamesList">Voir tout <span>({{ mobaGamesCount }})</span> <i class="fa-solid fa-arrow-right"></i></a>

                    </div>
                </section>


                {# Liste jeux catégorie "Battle royal"" #}
                <section class="gameList3">
                    <div id="splideBr" class="splide sectionHomeContainerGames splideGames">

                        <a href="{{ path('app_genreGames', {'slug':'battle-royal'}) }}" class="blinkingSectionTitle sectionTitleGames">
                            <div class="gamesGenreTitle"></div>
                            <h3 class="gamesSubTitle noMarginBottom">
                                <i class="fa-solid fa-crown gamesListIcon"></i>
                                <span class="gamesSubtitleTitle"> Battle royal</span>
                            </h3>
                        </a>

                        {# <div class="lp-page3-containerMaster"> #}

                            {% if battleRoyalGames|length > 0 %}

                                <div class="gamesSplideContainer">
                            
                                    <div class="games-container games-container-phone splide__track"> 

                                        <div class="lp-phone-slpideTrait1"></div>

                                        <div class="splide__list splideListGames">

                                            {% set index = 1 %}

                                            {% for game in battleRoyalGames %}

                                                <a title="{{ game.title }}" class="gameCardLink splide__slide" href="{{ path('app_game', {'slug': game.slug} )}}" style="transform:scale(0.9);">
                                                    <article class="lp-page3-slideContainer">

                                                        <svg class="gameSelectedBracketUp-games">
                                                            <path 
                                                                id="gameSelectedBracketUpPath{{ index }}"
                                                                class="gameSelectedBracketUpPath hiddenPhone" 
                                                                d="M 54 80 L 57 56 C 57 53 60 48 66 48 L 67 48 L 250 48 C 254 48 259 50 258 55 L 258 55 L 255 80"
                                                                {# d="M 57 82 L 57 48 L 66 48 L 267 48 L 276 48 L 276 82" (sharp angles) #}
                                                                fill-opacity="0"
                                                                />
                                                        </svg>

                                                        <div id="lp-page3-slide0{{ index }}" class="games-gameCard" style="background-image: linear-gradient(rgba(0, 0, 255, 0.05), rgba(249, 123, 44, 0.5)),url('{{ asset("img/games/headerBackground/" ~ game.subBanner )}}'); background-size:cover;">
                                                        
                                                            {# Si jeu déjà fav: ptite icone #}
                                                            {% if app.user and game in app.user.favoris %}
                                                                <span class="gameFavoritedLabel">
                                                                    <i class="fa-solid fa-heart"></i>
                                                                </span>
                                                            {% endif %}

                                                        </div>

                                                        <span id="lp-gameCardTitle{{ index }}" value="{{ game.title }}" class="lp-gameCardTitle-games">{{ game.title }}</span>

                                                        {# only Phone: #}
                                                        <span value="{{ game.title }}" class="lp-gameCardTitlePhone">{{ game.title }}</span>

                                                        <svg class="gameSelectedBracketDown-games">
                                                            <path 
                                                                id="gameSelectedBracketDownPath{{ index }}"
                                                                class="gameSelectedBracketDownPath hiddenPhone" 
                                                                d="M 54 80 L 57 56 C 57 53 60 48 66 48 L 67 48 L 250 48 C 254 48 259 50 258 55 L 258 55 L 255 80"
                                                                {# d="M 57 82 L 57 48 L 66 48 L 267 48 L 276 48 L 276 82" (sharp angles) #}
                                                                fill-opacity="0"
                                                                />
                                                        </svg>

                                                    </article>
                                                </a>

                                                {% set index = index + 1 %}

                                            {% endfor %}

                                            {# Fausse card (pour espacement final, évite la coupure midCard de la dernière card) #}
                                            <a class="gameCardLink splide__slide" style="transform:scale(0.9);">
                                            </a>

                                        </div>

                                        <div class="lp-phone-slpideTrait2"></div>

                                    </div>

                                </div>

                            {% else %}

                                <div class="emptyListMsg" style="display:inline-flex; flex-direction:column; width:100%;">
                                    <span class="gamesListsEmptyMsg">Aucun jeu pour l'instant</span>
                                </div>
                                
                            {% endif %}

                        {# </div> #}

                        {# <div class="gamesListClipPathEnd"></div> #}

                        <a href="{{ path('app_genreGames', {'slug':'battle-royal'}) }}" class="seeAll-gamesList">Voir tout <span>({{ brGamesCount }})</span> <i class="fa-solid fa-arrow-right"></i></a>

                    </div>
                </section>


                {# Splide JS carousel games #}
                <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);
                        
                        // Slide Scroll vertical sur mobile pas bonne idee car mess avec le scroll page
                        if (isMobile){

                            var splideFps = new Splide( '#splideFps', {
                                direction : 'ttb',
                                height: '25rem',
                                perPage: 4,
                                pagination: false,
                            } );
                            splideFps.mount();

                            
                            var splideMoba = new Splide( '#splideMoba', {
                                direction : 'ttb',
                                height: '25rem',
                                perPage: 4,
                                pagination: false,
                            } );
                            splideMoba.mount();


                            var splideBr = new Splide( '#splideBr', {
                                direction : 'ttb',
                                height: '25rem',
                                perPage: 4,
                                pagination: false,
                            } );
                            splideBr.mount();

                        } else {

                            var splideFps = new Splide( '#splideFps', {
                                width: '100%',
                                perPage: 7,

                            } );
                            splideFps.mount();

                            var splideMoba = new Splide( '#splideMoba', {
                                width: '100%',
                                perPage: 7,

                            } );
                            splideMoba.mount();

                            var splideBr = new Splide( '#splideBr', {
                                width: '100%',
                                perPage: 7,

                            } );
                            splideBr.mount();
                        }

                    });
                </script>


                {# FadeIn des cards JS #}
                <script>
                    var teamCards = document.querySelectorAll('.gameCardLink'); 

                    var interval = 120;
                    var index = 0;
                    
                    function applyOpacity() {
                        if (index < teamCards.length) {
                            if(!teamCards[index].classList.contains('hidedCard')) {
                                teamCards[index].style.opacity = "1";
                                index += 1;
                                setTimeout(applyOpacity, interval);
                            }
                        }
                    }

                    // Délai pour fadeIn du body et header
                    setTimeout(() => {
                        applyOpacity(); 
                    }, 820);
                    
                </script>

            </div>

        </div>

    </main>


{% endblock %}