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

{% block title %}Accueil - connecté{% endblock %}
{% block meta_description %}
    Votre espace
{% 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 navActive"><i class="fa-solid fa-house"></i></a>
            <a href="{{ path('app_games') }}" class="gamesNav caps">jeux</a>
            {% if app.user %}
                <a href="{{ path('app_userGroups') }}" class="teamsNav caps">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 %}

            <a href="{{ path('app_searchPage') }}" class="gamesNav caps"><i class="fa-solid fa-magnifying-glass"></i></a>
            {% 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 (mobile) #}
            <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 mainHome">

        {% if app.user %}
            <p class="greetingMsg">Welcome back, <span style="color:white;">{{ app.user.pseudo|capitalize }}</span> !</p>
        {% endif %}

        {% if app.user %}

            {# *** Si aucun Fav (après /register par exemple), carrousel games avec select ajax addFav #}
            {# Selection onClick card (ajout de l'id du jeu dans un tableau qui sera passer au controller lors du click Valider) #}
            {% if userFav|length == 0 %}

                <section class="homeSection1"> 
                
                    <div class="splide splideAddFavs">

                        <header>
                            <h2 id="carousel-heading" class="addArrayFav_title"><i class="fa-solid fa-heart-circle-plus addFavTitleFa"></i> <span>Ajoutez vos jeux <strong>favoris</strong></span> :</h2>
                        </header>

                        <div style="padding-right:50px; background-color:var(--background-color);">

                            <div class="lp-page3-containerMaster">

                                <div style="overflow:hidden;">

                                    <div id="lp-page3-container" class="lp-page3-container addFavContainer splide__track" style="margin-top:15px;"> 

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

                                        <div class="splide__list">

                                            {% set index = 1 %}

                                            {# ici userFav = allGames si aucun fav (backend) #}
                                            {% for game in allGames %}

                                                <article title="{{ game.title }}" class="gameCardLink splide__slide" style="transform:scale(0.9);">

                                                    <span id="noFavSplide_gameId{{ index }}" style="display:none;">{{ game.id }}</span>

                                                    <div id="lp-page3-slideContainer{{ index }}" class="lp-page3-slideContainer">

                                                        <svg class="gameSelectedBracketUp">
                                                            <path 
                                                                id="gameSelectedBracketUpPath{{ index }}"
                                                                class="gameSelectedBracketUpPath" 
                                                                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"
                                                                {# 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="lp-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;">
                                                            
                                                            <div class="addFavIconWrapper">
                                                                {# "+" hover card #}
                                                                <i id="favArrayPlus{{ index }}" class="fa-solid fa-plus favArrayHeart favArrayPlus"></i>
                                                                {# Coeur ajouté à l'array fav #}
                                                                <i id="favArrayHeart{{ index }}" class="fa-solid fa-heart-circle-check favArrayHeart"></i>
                                                            </div>
                                                            
                                                            <span id="lp-gameCardTitle{{ index }}" value="{{ game.title }}" class="lp-gameCardTitle lp-gameCardAddFavTitle">{{ game.title }}</span>

                                                        </div>

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

                                                        <svg class="gameSelectedBracketDown">
                                                            <path 
                                                                id="gameSelectedBracketDownPath{{ index }}"
                                                                class="gameSelectedBracketDownPath" 
                                                                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"
                                                                {# 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>

                                                </article>

                                                {% set index = index + 1 %}

                                            {% endfor %}

                                            {# Fausse dernière card (espacement) #}
                                            <div class="gameCardLink hidedCard splide__slide" style="transform:scale(0.9); opacity:0;" >
                                                <div class="lp-page3-slideContainer">
                                                    <div class="lp-gameCard" style="cursor:default; background-image: linear-gradient(rgba(0, 0, 255, 0.05), rgba(249, 123, 44, 0.5)),url('{{ asset("img/games/headerBackground/lolHeaderBg.jpg")}}'); background-size:cover;">
                                                        
                                                        <div class="addFavIconWrapper">
                                                            {# "+" hover card #}
                                                            <i class="fa-solid fa-plus favArrayHeart favArrayPlus"></i>
                                                            {# Coeur ajouté à l'array fav #}
                                                            <i class="fa-solid fa-heart-circle-check favArrayHeart"></i>
                                                        </div>
                                                        <span class="lp-gameCardTitle lp-gameCardAddFavTitle"></span>

                                                    </div>   
                                                </div>
                                            </div>

                                        </div>

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

                                    </div>

                                </div>

                            </div>

                        </div>


                        <div style="text-align:center; margin:30px auto 35px auto; width:fit-content;" id="validateAddFavsDiv" title="Sélectionnez d'abord un ou plusieurs jeux">
                            <button id="addArrayFavBtn" class="btn btn-primary addArrayFavBtn" disabled>Ajouter</button>
                        </div>


                        <script>

                            // Lors click sur un jeu: ajout de l'id à l'array du jeu à ajouter aux favoris
                            window.onload = function() {

                                {% set index = 1 %}
                                var favArray = [];

                                {% for game in allGames %}

                                    function handleMouseOver{{ index }}() {
                                        document.getElementById("favArrayPlus{{ index }}").style.opacity = "1";
                                    }

                                    function handleMouseOut{{ index }}() {
                                        document.getElementById("favArrayPlus{{ index }}").style.opacity = "0";
                                    }

                                    function handleClick{{ index }}() {

                                        if (!favArray.includes({{ game.id }})) {

                                            document.getElementById("lp-page3-slide0{{ index }}").removeEventListener("mouseover", handleMouseOver{{ index }});
                                            document.getElementById("lp-page3-slide0{{ index }}").removeEventListener("mouseout", handleMouseOut{{ index }});

                                            document.getElementById('favArrayHeart{{ index }}').style.opacity = "1";

                                            document.getElementById('favArrayPlus{{ index }}').style.opacity = "0";

                                            document.getElementById('lp-page3-slide0{{ index }}').style.backgroundImage = "linear-gradient(rgb(0 0 0 /95%), rgba(249, 123, 44, 0.5)),url(/img/games/headerBackground/{{ game.subBanner }})";

                                            document.getElementById('gameSelectedBracketUpPath{{ index }}').style.opacity = "1";
                                            document.getElementById('gameSelectedBracketUpPath{{ index }}').style.transform = "translateY(3px)";
                                            document.getElementById('gameSelectedBracketDownPath{{ index }}').style.opacity = "1";
                                            document.getElementById('gameSelectedBracketDownPath{{ index }}').style.transform = "translateY(2px)";

                                            favArray.push({{ game.id }});

                                        } else {

                                            document.getElementById("lp-page3-slide0{{ index }}").addEventListener("mouseover", handleMouseOver{{ index }});
                                            document.getElementById("lp-page3-slide0{{ index }}").addEventListener("mouseout", handleMouseOut{{ index }});

                                            document.getElementById('favArrayHeart{{ index }}').style.opacity = "0";

                                            document.getElementById('lp-page3-slide0{{ index }}').style.backgroundImage = "linear-gradient(rgba(0, 0, 255, 0.05), rgba(249, 123, 44, 0.5)),url(/img/games/headerBackground/{{ game.subBanner }})";

                                            document.getElementById('gameSelectedBracketUpPath{{ index }}').style.opacity = "0";
                                            document.getElementById('gameSelectedBracketUpPath{{ index }}').style.transform = "translateY(0px)";
                                            document.getElementById('gameSelectedBracketDownPath{{ index }}').style.opacity = "0";
                                            document.getElementById('gameSelectedBracketDownPath{{ index }}').style.transform = "translateY(2px)";

                                            // Test fix hover brackets "[]" verticaux (apres add+remove favGame de la liste de jeux à ajouter aux favoris)
                                            // document.getElementById('lp-page3-slide0{{ index }}').addEventListener("mouseover", function() {
                                            //     document.getElementById('gameSelectedBracketUpPath{{ index }}').style.transform = "translateY(-20px)";
                                            // })
                                            // document.getElementById('lp-page3-slide0{{ index }}').addEventListener("mouseout", function() {
                                            //     document.getElementById('gameSelectedBracketUpPath{{ index }}').style.transform = "translateY(10px)";
                                            // })

                                            let indexToDelete = favArray.indexOf({{ game.id }});
                                            if (indexToDelete !== -1) {
                                                favArray.splice(indexToDelete, 1);
                                            }

                                        }

                                        if(favArray.length == 0 ) {
                                            document.getElementById('addArrayFavBtn').disabled = true;
                                            document.getElementById('addArrayFavBtn').setAttribute('title', "Sélectionnez d'abord un ou plusieurs jeux");
                                        }
                                        else {
                                            document.getElementById('addArrayFavBtn').disabled = false;
                                            document.getElementById('addArrayFavBtn').setAttribute('title', "");
                                        }
                                    }

                                    document.getElementById("lp-page3-slide0{{ index }}").addEventListener("mouseover", handleMouseOver{{ index }});
                                    document.getElementById("lp-page3-slide0{{ index }}").addEventListener("mouseout", handleMouseOut{{ index }});
                                    document.getElementById("lp-page3-slide0{{ index }}").addEventListener("click", handleClick{{ index }});

                                    {% set index = index + 1 %}

                                {% endfor %}


                                // Envoi de l'array nouveau Favoris (ajax):
                                document.getElementById('addArrayFavBtn').addEventListener("click", function() {

                                    fetch('/addArrayFav', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json'
                                        },
                                        body: JSON.stringify(favArray)
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.success) {
                                            window.FlashMessage.success(data.newState);  
                                            location.reload(); 
                                            // alert(data.data);                                                 
                                        } else {
                                            window.FlashMessage.error('Une erreur est survenue');
                                        }
                                    });
                                })

                            }

                        </script>

                    </div>

                </section>

            {% endif %}
                

            {# Raccourcis Jeux favoris si logged in #}
            <section class="homeSection2">
                <div class="splide sectionHomeContainer">

                    <header class="blinkingSectionTitle headerLineSection">
                        <div id="homeFavGamesTitle" class="homeFavGamesTitle sectionTitleBorderRadius" style="background-color:var(--primary-color);"></div>
                        <h3 class="homeSubTitle noMarginBottom"><i class="fa solid fa-heart homeTitleIcon"></i> Jeux Favoris</h3>
                        <span id="homeFavSectionCollapseBtn" class="collapseMobile chevronRotate"><i class="fa-solid fa-chevron-down"></i></span>
                    </header>

                    <div id="homeFavSectionCollapse" class="lp-page3-containerMaster collapseSection2">

                        {% if userFav|length > 0 %}

                            <div style="overflow:hidden;">
                        
                                <div id="lp-page3-container" class="lp-page3-container splide__track"> 

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

                                    <div class="splide__list">

                                        {% set index = 1 %}

                                        {% for game in userFav %}


                                            {# Calcul du nombre de nouveaux Topics/Médias depuis lastConnexion pour chaque jeu favori #}
                                            {% 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 %}
                                            {# 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">
                                                        <path 
                                                            id="gameSelectedBracketUpPath{{ index }}"
                                                            class="gameSelectedBracketUpPath" 
                                                            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"
                                                            {# 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="lp-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;">

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

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

                                                    </div>

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

                                                    <svg class="gameSelectedBracketDown gameSelectedBracketDownHomeMobile">
                                                        <path 
                                                            id="gameSelectedBracketDownPath{{ index }}"
                                                            class="gameSelectedBracketDownPath" 
                                                            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"
                                                            {# 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 %}

                                        {# Card ajout fav (link games) #}
                                        <a href="{{ path('app_games') }}" class="gameCardLink splide__slide addFavCard" style="transform:scale(0.9); opacity:0.8;">
                                            <div class="lp-page3-slideContainer">
                                                <div class="lp-gameCard fakeCard" style="margin:0 auto; background-color:#1b1b1b;">

                                                    <span class="addFavCardIcon"><i class="fa-solid fa-square-plus"></i></span>
                                                    {# <span class="lp-gameCardTitle">+</span> #}

                                                </div>
                                            </div>
                                        </a>

                                        {# Fausse dernière card (espacement) #}
                                        <a class="gameCardLink hidedCard splide__slide" style="transform:scale(0.9); opacity:0;">
                                            <div class="lp-page3-slideContainer">
                                                <div class="lp-gameCard" style="cursor:default;">

                                                    <span class="lp-gameCardTitle"></span>

                                                </div>
                                            </div>
                                        </a>

                                    </div>

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

                                </div>

                            </div>

                        {% else %}

                        <div class="emptyListMsg sectionHomeContent" style="display:inline-flex; flex-direction:column; width:100%;">
                            <span>Ajouter des jeux à vos Favoris pour les retrouver ici et filtrer le contenu du site !</span>
                            <a href="{{ path('app_games') }}" style="text-decoration:underline;"><i class="fa-solid fa-magnifying-glass" style="margin:0 10px;"></i> Parcourir les jeux</a>
                        </div>
                            
                        {% endif %}

                    </div>
                </div>
            </section>

            {# Raccourcis Teams si logged in #}
            <section class="sectionHomeContainer homeSection3">

                <header class="headerLineSection">
                    <div id="homeUserTeamsTitle" class="homeUserTeamsTitle sectionTitleBorderRadius" style="background-color:var(--primary-color);"></div>
                    <a href="{{ path('app_userGroups') }}" style="width:fit-content; display:block;">
                        <h3 class="homeSubTitle noMarginBottom mobilHomeTitle">
                            <i class="fa-solid fa-users-rays homeTitleIcon"></i> Vos teams
                        </h3>
                    </a>
                    <span id="homeTeamsSectionCollapseBtn" class="collapseMobile chevronRotate"><i class="fa-solid fa-chevron-down"></i></span>
                </header>

                <div id="homeTeamsSectionCollapse" class="sectionHomeContent genreGameList groupsGrid collapseSection2" style="text-align:center; width:100%;">

                    {% if userTeams|length > 0 %}
                    
                        {% for userTeam in userTeams %}

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

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

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

                                        <div class="teamCardTextDiv">

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

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

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

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

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

                                        </div>

                                        <div class="teamCardImgWrapper">

                                            {% if userTeam.imgUrl is not null and imageExists(userTeam.imgUrl) %}
                                                <img class="teamCardImg" src="/img/uploads/{{ userTeam.imgUrl }}">
                                            {% else %}
                                                <img class="teamCardImg" src="/img/teamDefaultPic_dark.jpg">
                                            {% endif %}

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

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

                                        </div>

                                    </div>
                                </a>
                            </article>

                        {% endfor %}
                    
                    {% else %}
                        
                        <div class="emptyListMsg sectionHomeContent" style="display:inline-flex; flex-direction:column; width:100%;">
                            <span>Rejoignez des teams pour y accéder directement ici !</span>
                            <a href="{{ path('app_games') }}" style="text-decoration:underline;"><i class="fa-solid fa-magnifying-glass" style="margin:0 10px;"></i>Parcourir les teams</a>
                        </div>

                    {% endif %}

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



        {# Si aucun fav: les topics/medias listes sont vident (TODO: global dans ce cas)  #}
        {# {% if userFav|length > 0 %} #}
        
        {# Les 5 derniers Topics (jeux favoris) #}
        <section class="sectionHomeContainer homeSection4">

            <header class="headerLineSection">
                <div id="homeTopicsTitle" class="homeTopicsTitle sectionTitleBorderRadius" style="background-color:var(--primary-color);"></div>
                <a href="{{ path('app_allTopicsGlobal') }}" style="height:fit-content; width:fit-content; display:block;">
                    <h3 class="homeSubTitle noMarginBottom mobilHomeTitle">
                        <i class="fa-solid fa-comment-dots homeTitleIcon"></i> Derniers Topics
                    </h3>
                </a>
                <span id="homeTopicsSectionCollapseBtn" class="collapseMobile chevronRotate"><i class="fa-solid fa-chevron-down"></i></span>
            </header>

            <div id="homeTopicsSectionCollapse" class="sectionHomeContent topicList marginTop collapseSection2">

                {% if lastTopics|length > 0 %}
                
                    {% for topic in lastTopics %}
                        <article>
                            <a href="{{ path('app_topicDetail', {'slug': topic.slug}) }}">
                                <div title="{{ topic.title|capitalize }}" class="topicCard" style="border-bottom: 4px solid {{ topic.game.color }}">
                                    <img class="tinyLogo" src="{{ asset('img/games/tinyLogo/' ~ topic.game.tinyLogo) }}" />
                                    <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: {{ topic.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" style="color:#1da8b7d4;"></i></span>
                                        {% else %}
                                            <span class="topicSubMsgCount">{{ topic.topicPostsCount }} <i class="fa-solid fa-message msgIconColor"></i></span>
                                        {% endif %}
                                    </div>
                                </div>
                            </a>
                        </article>
                    {% endfor %}

                    <span class="seeAllRedirect">
                        <a href="{{ path('app_allTopicsGlobal') }}">Tout voir  <i class="fa-solid fa-chevron-right"></i></a>
                    </span>

                {% else %}
                    
                    <div class="emptyListMsg" style="display:inline-flex; flex-direction:column; width:100%;">
                        <span>Ajoutez des jeux à vos favoris pour retrouver ici leurs derniers topics !</span>
                        <a href="{{ path('app_allTopicsGlobal') }}" style="text-decoration:underline;"><i class="fa-solid fa-magnifying-glass" style="margin:0 10px;"></i>Parcourir tous les topics</a>
                    </div>

                {% endif %}

            </div>

        </section>




        {# Derniers médias (tout jeux confondus) #}
        <section class="sectionHomeContainer homeSection5">

            <header class="headerLineSection">
                <div id="homeMediasTitle" class="homeMediasTitle sectionTitleBorderRadius" style="background-color:var(--primary-color);"></div>
                <a href=" {{ path('app_allMediasGlobal') }}">
                    <h3 class="homeSubTitle noMarginBottom mobilHomeTitle">
                        <i class="fa-solid fa-photo-film homeTitleIcon"></i> Médias
                    </h3>
                </a>
                <span id="homeMediasSectionCollapseBtn" class="collapseMobile chevronRotate"><i class="fa-solid fa-chevron-down"></i></span>
            </header>

            {% if lastMedias|length > 0 %}

                <div id="homeMediasSectionCollapse" class="collapseSection3"> 
            
                    <div class="sectionHomeContent masonry-grid">

                        {% for media in lastMedias %}

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

                                {% if app.user and app.user.autoPlayGifs or not app.user %}
                                <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}) }}">
                                        {% endif %}
                                        <header class="mediaCardHeader" title="{{ media.title|capitalize }}" style="border-bottom: 3px solid {{ media.game.color }};">
                                            <div class="tinyLogoDiv">
                                                <img class="tinyLogoMedia" src="{{ asset('img/games/tinyLogo/' ~ media.game.tinyLogo) }}" />
                                            </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: {{ media.game.color }}"><i class="fa-solid fa-fire fa-beat-fade"></i> new</span>
                                            {% endif %}

                                        </header>
                                        {% if app.user and not app.user.autoPlayGifs %}
                                        </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" />
                                            {% else %}
                                                <img src="{{ asset("img/uploads/" ~ media.url) }}" alt="media" class="mediaImg" />
                                            {% endif %}
                                        {% else %}
                                            <img src="{{ asset("img/uploads/" ~ media.url) }}" alt="media" class="mediaImg" />
                                        {% endif %}
                                        
                                    </div>

                                {% if app.user and app.user.autoPlayGifs or not app.user %}
                                </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_allMediasGlobal') }}">Tout voir  <i class="fa-solid fa-chevron-right"></i></a>
                    </span>

                </div>




                {# 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>

            {% else %}

                <div class="emptyListMsg sectionHomeContent" style="display:inline-flex; flex-direction:column; width:100%;">
                    <span>Ajoutez des jeux à vos favoris pour retrouver ici leurs derniers médias !</span>
                    <a href="{{ path('app_allMediasGlobal') }}" style="text-decoration:underline;"><i class="fa-solid fa-magnifying-glass" style="margin:0 10px;"></i>Parcourir tous les médias</a>
                </div>

            {% endif %}

        </section>

    </main>



    {# 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 splide = new Splide( '.splide', {
                    direction : 'ttb',
                    height: '25rem',
                    perPage: 4,
                    pagination: false,
                } );

                splide.mount();

            } else {
                var splide = new Splide( '.splide', {
                    width: '100%',
                    perPage: 5,

                } );

                splide.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>

    
{% endblock %}