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

{% block title %}Médias publiés{% endblock %}
{% block meta_description %}
    Liste de vos médias publiés
{% endblock %}

{% block body %}


    <header class="globalBanner" style="background: url('{{ asset('img/banner1.jpg') }}' )">
        <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>
        <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>
                        {% 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">

        {# Fil d'Ariane #}
        <p class="breadcrumbs">
            <a  href="{{ path('app_home') }}"><i class="fa-solid fa-house arianeHome"></i></a>
            <i class="fa-solid fa-angle-right arianeArrow"></i>
            <a class="underlineLink" href="{{ path('app_user') }}">Mon compte</a>
            <i class="fa-solid fa-angle-right arianeArrow"></i>
            <span>Mes Médias<span>
        </p>

        <section>

            <h2 class="pageTitle">Médias publiés <span class="gameListCount">({{ userMediasCount }})</span></h2>

            <div class="listContainer topicList listMarginTop">

                {% set index = 0 %}

                {% for media in userMedias %}

                    {% if app.user and app.user.autoPlayGifs %}
                    <a class="mediaBigCardLink" href="{{ path('app_mediaDetail', {'slug': media.slug}) }}">
                    {% endif %}
                        
                        <article 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 %}
                            <div class="mediaCardHeader" style="border-bottom: 3px solid {{ media.game.color }}">
                                <div class="tinyLogoDiv">
                                    <img class="tinyLogoMedia" src="{{ asset('img/games/tinyLogo/' ~ media.game.tinyLogo) }}" alt="logo du jeu {{ media.game.title }}" />
                                </div>
                                <span class="mediaTitle">{{ media.title|capitalize }}</span>
                                {# Sticker NEW #}
                                {% if app.user and media.publishDate > app.user.previousCo %}
                                    <span class="stickerNew stickerNewMedia stickerNewMediaDetail" style="color: {{ media.game.color }}"><i class="fa-solid fa-fire fa-beat-fade"></i> new</span>
                                {% endif %}
                                {# <span class="mediaCardPublishDate">{{ time_diff(media.publishDate) }}</span> #}
                                <div id="deleteSelfMediaDiv{{index}}" class="deleteSelfMediaDiv" title="Supprimer le média"><i class="fa-solid fa-trash deleteSelfMediaIcon"></i></div>
                            </div>
                            {% 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 %}
                            <a href="{{ path('app_mediaDetail', {'slug': media.slug}) }}">
                                <img src="{{ asset("img/uploads/" ~ media.url) }}" alt="media" class="mediaImg" />
                            </a>
                            {% endif %}
                            
                        </article>

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


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

                        {# Upvote/downvote média + score + nbrPosts #}
                        {# 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 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>


                    <div style="width:35%; margin: 15px auto; height:1px; background-color: {{ media.game.color }}; opacity:0.4;"></div>


                    <dialog class="modalDialog" id="confirmDeleteSelfMediaModal{{index}}">
                        <p style="font-size:1.3em;">Êtes-vous sûr de vouloir supprimer ce média ? <br>Tout les commentaires associés seront également supprimés</p>

                        <a href="{{ path('app_deleteSelfMedia',{'idMedia':media.id}) }}" class="confirmModal">Supprimer</a>
                        <span id="cancelDeleteSelfMedia{{index}}" class="cancelModal" onclick="confirmDeleteSelfMediaModal{{index}}.close()">Annuler</span>                            
                    </dialog>


                    <script>
                        document.getElementById('deleteSelfMediaDiv{{index}}').addEventListener('click', function() {
                            // Evite le click sur le lien de la div parente:
                            event.preventDefault();
                            // Modal confirmation
                            document.getElementById('confirmDeleteSelfMediaModal{{index}}').showModal();
                        })
                    </script>

                    {% set index = index + 1 %}

                {% endfor %}

            </div>

        </section>

    </main>

{% endblock %}