{% extends 'base.html.twig' %}
{# Si USER: n'affiche pas les teams dont l'user est membre #}
{% block title %}Toutes les teams{% endblock %}
{% block meta_description %}
    Parcourez la liste des teams
{% endblock %}

{% block body %}

    <header class="gameHeader" 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">jeux</a>
            {% if app.user %}
                <a href="{{ path('app_userGroups') }}" class="teamsNav caps navActive">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 navActive">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">

        {# Fil d'Ariane #}
        <p class="breadcrumbs">
            <a  href="{{ path('app_home') }}"><i class="fa-solid fa-house arianeHome"></i></a>
            <i class="fa-solid fa-angle-right arianeArrow"></i>
            <span>Teams</span>
        </p>


        <section>

            <h2 class="pageTitle">Teams</h2>
            {% if app.user %}
                <a href="{{ path('app_userGroups') }}">Mes teams</a>
            {% endif %}
        
            <div class="groupsGrid">

                {% for group in groups %}

                    <a title='"{{ group.title|capitalize }}"' href="{{ path('app_groupDetails', {'groupSlug': group.slug } ) }}" class="teamCardLink" style="width:fit-content;position:relative;">
                        <article class="teamCard" style="border-color:{{ group.game.color }}60">

                            <div class="teamCardTextDiv">

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

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

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

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

                                <ul class="teamCard-criterias">
                                    <li>
                                        {% if group.restriction18 %}
                                            <img src="{{ asset('img/criteria_18.png') }}" style="filter:invert(0.9);" alt="symbole interdit au moins de 18 ans">
                                        {% else %}
                                            <img src="{{ asset('img/criteria_18.png') }}" style="opacity:0.9;" alt="symbole interdit au moins de 18 ans">
                                        {% endif %}
                                    </li>
                                    <li>
                                        {% if group.restrictionMic %}
                                            <img src="{{ asset('img/criteria_micro.png') }}" style="filter:invert(0.9);" alt="symbole microphone">
                                        {% else %}
                                            <img src="{{ asset('img/criteria_micro.png') }}" style="opacity:0.9;" alt="symbole microphone">
                                        {% endif %}
                                    </li>
                                </ul>
                            
                            </div>

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

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

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

                                
                            </div>

                        </article>
                    </a>
                    
                {% endfor %}

            </div>

        </section>

    </main>


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

        var interval = 160;
        var index = 0;
        
        function applyOpacity() {
            if (index < teamCards.length) {
                teamCards[index].style.opacity = "1";
                index += 1;
                setTimeout(applyOpacity, interval);
            }
        }

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



{% endblock %}