{% extends 'base.html.twig' %}
{% block title %}Médias - {{ gameFrom.title }}{% endblock %}
{% block meta_description %}
    Parcourez la liste des médias du jeu {{ gameFrom.title }}
{% endblock %}

{% block body %}

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

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

        <div style="display:inline-flex;">
            <a href="{{ path('app_home') }}"><img src="{{ asset('img/games/headerSiteLogo/' ~ gameFrom.siteLogo ) }}" class="logoPng" id="logoPng" alt='bearded dwarf forging a sword above "SquadForge" title' /></a>
            <a id="logoShrinkTxt" href="{{ path('app_home') }}">SQUADFORGE</a>
        </div>

        <nav id="navLine" class="navLine">
            <span id="closeBurgerMobile"><i class="fa-solid fa-xmark"></i></span>
            <a href="{{ path('app_home') }}" class="homeNav"><i class="fa-solid fa-house"></i></a>
            <a href="{{ path('app_games') }}" class="gamesNav caps navActive" style="background-color: {{ gameFrom.color }}" onmouseover="this.style.borderTop = '2px solid {{ gameFrom.color }}'; this.style.color = 'white';" onmouseout="this.style.borderTop = '2px solid rgba(0,0,0,0)'; this.style.color = 'black';">jeux</a>
            {% if app.user %}
                <a href="{{ path('app_userGroups') }}" class="teamsNav caps">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>

        <a href="{{ path('app_game', {'slug': gameFrom.slug }) }}"><h2 id="headerGameTitle" class="headerGameTitle" style="border-right:10px solid {{ gameFrom.color }}; border-bottom:2px solid {{ gameFrom.color }};">{{ gameFrom.title }}</h2></a>
    
        {# Show menu Burger (mobile) #} 
        <span id="showBurgerMenu"><i class="fa-solid fa-bars"></i></span>
        
    </header>
    
    {# HeaderSouligne + Bandeau avertissement muted #}
    {% if app.user and app.user.muted and time_diff_future(app.user.endDateStatus) != false %}
        <div class="headerUnderline" style="background-color: {{ gameFrom.color }}"></div>
        <div class="mutedBanner">  
            <span><i class="fa-solid fa-circle-exclamation mutedBannerIcon"></i>Vous êtes actuellement réduit au silence <span class="muteEndDate">( fin dans <span class="strongNbr">{{ time_diff_future(app.user.endDateStatus) }}</span> )</span></span>
        </div>
    {% else %}
        <div class="headerUnderline marginBottomHeaderLine" style="background-color: {{ gameFrom.color }}"></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_games') }}">Jeux</a>
            <i class="fa-solid fa-angle-right arianeArrow"></i>
            <a class="underlineLink" href="{{ path('app_game', {'slug': gameFrom.slug }) }}">{{ gameFrom.title }}</a>
            <i class="fa-solid fa-angle-right arianeArrow"></i>
            <span>Médias</span>
        </p>

        <section class="marginTop" style="display:inline-flex; width:100%; justify-content:space-between;">
            <h3 class="gameSubTitle noMarginBottom" style="background-color:{{ gameFrom.color }}">
                Médias
                <span class="gameListCount">&nbsp;({{ gameMediasCount }})</span>
            </h3>
                            
            {% if app.user %}
                <span id="createMediaBtn" class="createButton" style="border-top: 1px solid {{ gameFrom.color }}; border-bottom: 1px solid {{ gameFrom.color }};"><i class="fa-solid fa-plus" style="color:{{ gameFrom.color }}"></i>&nbsp;Créer</span>
            {% else %}
                <a href="{{ path('app_login') }}"><span class="createButton" style="border-top: 1px solid {{ gameFrom.color }}; border-bottom: 1px solid {{ gameFrom.color }};"><i class="fa-solid fa-plus" style="color:{{ gameFrom.color }}"></i>&nbsp;Créer</span></a>
            {% endif %}
        </section>


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

            {{ form_start(formAddMedia) }}

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

                <div class="inline" style="position:relative; margin: 5px auto;">
                    <span class="labelSpan" style="width:100px;">{{ form_label(formAddMedia.title, 'Titre')}}<span id="charCountMsgMedia" style="color:red;"> (au moins 5 mots)</span></span>
                    {{ form_widget(formAddMedia.title) }} 
                </div>

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

                <span class="submitButton" style="margin: 15px auto;">{{ form_widget(formAddMedia.submit, { 'label': 'Publier' }) }}</span>

                {{ form_widget(formAddMedia._token) }}
            {{ form_end(formAddMedia) }}
            
        </section>


        {# Liste Médias du jeu  #}
        <section class="listContainer marginTop mediaList">

            {% for media in gameMediasDesc %}

                {% if app.user and app.user.autoPlayGifs %}
                <a 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>
                        {% 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 %}
                        
                    </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 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>

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

            {% endfor %}
        </section>

    </main>






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

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

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

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

            uploadedFileExt = getFileExtension(uploadedFile.name);

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

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

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


        {# Script vérif Front 5 mots minimum #}

        let charContMsg2 = document.querySelector("#charCountMsgMedia");
        let textInput2 = document.querySelector('#media_title');

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

            let text = textInput2.value;
            const words = text.split(" ");
            const wordCount = words.length;

            if(wordCount <= 5) {
                charContMsg2.style.color = "red";
                textCriteria = false;
            }
            else {
                charContMsg2.style.color = "#00be00";
                textCriteria = true;
            }
        })


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

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



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

    </script>


    {# // Adaptation couleur borderBottom HeaderFixed #}
    <script>
        {% if app.user %}
             document.getElementsByClassName('profilIcon')[0].style.color = "{{gameFrom.color}}";
        {% endif %}

        if (document.getElementById('landingPageBool') == null) {
            window.addEventListener('scroll', () => {
                    if (window.scrollY > 0) {
                        if(document.getElementsByClassName('headerFixed')[0] !== null && document.getElementsByClassName('headerFixed')[0] !== undefined) {
                            document.getElementsByClassName('headerFixed')[0].style.borderColor = "{{gameFrom.color}}";

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

            })
        }
    </script>


{% endblock %}