{% extends 'base.html.twig' %}
{% block title %}Espace de modération{% endblock %}
{% block meta_description %}
    Tableau de bord de modération
{% 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">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>
            {% endif %}
            {% if app.user and "ROLE_MODO" in app.user.roles %}
            
                <a href="{{ path('app_moderationDashboard') }}" id="modoNav" class="modoNav navActive">
                    <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="width:60%;">

        <h2 class="pageTitle">Espace Modération</h2>

        <h3 class="modoSectionsSubtitle" style="margin-top:32px;">Validations des publications</h3>

        <section class="sectionContainer modoSection">

            <div>
                <div class="modoSubTitle1Bg" style="background-color:var(--primary-color);"></div>
                <h3 class="gameSubtitle test noMarginBottom"><i class="fa-solid fa-hourglass-half"></i> <strong>Topics</strong> en attente</h3>
            </div>

            <div class="sectionContent">
                {% if lastWaitingTopics|length == 0 %}

                    <p class="emptyListMsg">Aucun topic en attente de validation</p>
                    
                {% else %}

                    <div class="sectionHomeContent">
                            
                        {% for topic in lastWaitingTopics %}

                            <article>

                                <div id="topicCard{{ topic.id }}" class="topicCard" style="border-bottom: 4px solid {{ topic.game.color }}; cursor:pointer;">
                                    <img class="tinyLogo" src="{{ asset('img/games/tinyLogo/' ~ topic.game.tinyLogo) }}" />
                                    <span id="topicTitle{{ topic.id }}" class="topicTitleModo">{{ topic.title|capitalize }}</span>
                                    <div class="topicCardSubInfosModo">
                                        <span class="topicCardAuthorModo">{{ topic.user.pseudo|capitalize }}</span>
                                        <span class="topicCardPublishDate">{{ time_diff(topic.publishDate) }}</span>
                                    </div>
                                </div>
                                
                                <div id="topicSubCard{{ topic.id }}" class="topicSubCard notDisplayed">
                                    <p>{{ topic.firstMsg }}</p>
                                    <div class="mediaApprovalLine">
                                        <a href="{{ path('app_validateTopic', {'slug': topic.slug}) }}">
                                            <span class="mediaApproveBtn"><i class="fa-solid fa-check"></i></span>
                                        </a>
                                        <a href="{{ path('app_refuseTopic', {'slug': topic.slug}) }}">
                                            <span class="mediaRefuseBtn"><i class="fa-solid fa-xmark"></i></span>
                                        </a>
                                    </div>
                                </div>

                                {# OnClick TopicCard: détails et boutons validation/refus #}
                                <script>
                                    document.getElementById('topicCard{{ topic.id }}').addEventListener('click', function() {
                                        document.getElementById('topicSubCard{{ topic.id }}').classList.toggle('notDisplayed');
                                    });
                                </script>

                            </article>


                        {% endfor %}
                    
                    </div>

                {% endif %} 
            </div>

        </section>




        <section class="sectionContainer modoSection">

            <div>
                <div class="modoSubTitle1Bg" style="background-color:var(--primary-color);"></div>
                <h3 class="gameSubtitle test noMarginBottom"><i class="fa-solid fa-hourglass-half"></i> <strong>Médias</strong> en attente</h3>
            </div>

            {% if lastWaitingMedias|length == 0 %}

                <p class="emptyListMsg">Aucun média en attente de validation</p>

            {% else %}

                <div class="listContainer marginTop mediaList mediaListModo sectionHomeContent">

                    {% for media in lastWaitingMedias %}

                        <article style="display:inline-block;">

                            <div id="mediaCard{{ media.id }}" class="mediaCard mediaCardModo" style="cursor:pointer; background-color:{{ media.game.color }};">
                                <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) }}" />
                                    </div>
                                    <span id="mediaCardTitle{{ media.id }}" class="mediaTitle" style="font-family:'K2D',sans-serif;">{{ media.title|capitalize }}</span>
                                    <span class="mediaCardPublishDate" style="display:block;">{{ time_diff(media.publishDate) }}</span>
                                </div>
                                <img src="{{ asset("img/uploads/" ~ media.url) }}" alt="media" class="mediaImg" />
                            </div>

                            <div id="mediaSubCard{{ media.id }}" class="mediaApprovalLine notDisplayed">
                                <a href="{{ path('app_validateMedia', {'id': media.id}) }}">
                                    <span class="mediaApproveBtn"><i class="fa-solid fa-check"></i></span>
                                </a>
                                <a href="{{ path('app_refuseMedia', {'id': media.id}) }}">
                                    <span class="mediaRefuseBtn"><i class="fa-solid fa-xmark"></i></span>
                                </a>
                            </div>

                        </article>

                        {# OnClick MediaCard: détails et boutons validation/refus #}
                        <script>
                            document.getElementById('mediaCard{{ media.id }}').addEventListener('click', function() {
                                document.getElementById('mediaSubCard{{ media.id }}').classList.toggle('notDisplayed');
                                document.getElementById('mediaCard{{ media.id }}').classList.toggle('mediaCard');
                                document.getElementById('mediaCardTitle{{ media.id }}').classList.toggle('mediaTitle');
                                // document.getElementById('topicStatusValidate{{ media.id }}').classList.toggle('mediaStatusValidate');
                            });
                        </script>

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



        <h3 class="modoSectionsSubtitle">Contrôle des publications</h3>

        {# Section Signalements/Reports #}
        {# Ajax apercu on clic #}
        <section class="sectionContainer modoSection modoSectionRed">

            <div>
                <div class="modoSubTitle1BgReports" style="background-color:#dc2e2e;"></div>
                <h3 class="gameSubtitle test noMarginBottom" style="color:white;"><i class="fa-solid fa-flag"></i> <strong style="margin-left:14px;">Signalements</strong></h3>
            </div>

            <div class="reportsDiv">

                {% if reports|length > 0 %}
                
                    {% set index = 0 %}

                    {% for report in reports %}
                    
                        <article id="reportPreviewBtn{{ index }}" class="reportPreviewBtn" onmouseover="document.getElementById('reportPreviewFacticeTxt{{ index }}').style.letterSpacing = '2px';" onmouseout="document.getElementById('reportPreviewFacticeTxt{{ index }}').style.letterSpacing = '0px';">

                            <div id="reportDivHeader{{ index }}" class="reportDivHeader">
                                <div id="reportPreviewHeader{{ index }}">

                                    {% if report.objectType == "topicPost" or report.objectType == "mediaPost" %}
                                        {% set objectType = "post" %}

                                    {# {% elseif report.objectType == "media" %} #}
                                        {# MediaPreview #}

                                    {% else %}
                                        {% set objectType = report.objectType %}
                                    {% endif %}

                                    <div class="reportCardType">
                                        <span id="reportPreviewType{{ index }}" value="{{ report.objectType}}">{{ objectType|capitalize }}</span>
                                        <span id="reportPreviewId{{ index }}" value="{{ report.objectId }}">#{{ report.objectId }}</span>
                                    </div>
                                    <span class="nbrReportsTitle" style="margin-right:7px;">Signalements: <span class="strongNbr">{{ report.nbrReports }}</span></span>
                                    
                                </div>

                                {# Détails motifs #}
                                <div id="reportPreviewMotifsDetails{{ index }}" class="reportPreviewMotifsDetails">
                                </div>

                                <div id="reportPreviewFactice{{ index }}" class="reportPreviewFactice">
                                    <span id="reportPreviewFacticeTxt{{ index }}" class="reportPreviewFacticeTxt">VOIR</span>
                                </div>
                            </div>

                            {# Partie cachée de la reportCard (chargé Ajax) #}
                            <div id="preview{{ index }}" class="notDisplayed">

                                <div id="reportContentDiv{{ index }}" class="reportContentDiv" style="">

                                    {# Loader pendant ajax #}
                                    {# <span id="spinningLoader{{ index }}" class="spinningLoader">LOADING ...</span> #}

                                    <div id="spinningLoader{{ index }}" class="spinner spinningLoaderReportCard">
                                        <div class="lds-roller">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <div>Loading...</div>
                                    </div>

                                    <p id="detailText{{ index }}" class="reportCardText"></p>
                                    <img id="detailImg{{ index }}" src="" class="reportDetailImg" >
                                    <div class="reportDateAndAuthorDiv">
                                        <span id="detailPublishDate{{ index }}"></span>
                                        <span id="detailObjectAuthor{{ index }}"></span>
                                    </div>
                                </div>

                                <div id="clickableContainer{{ index }}" class="clickableContainer">

                                    <a href="{{ path('app_removeReports',{'objectType':report.objectType, 'objectId':report.objectId }) }}" id="reportCardInnocentDiv{{ index }}" class="reportCardInnocentDiv">
                                        <img src="{{ asset('img/justiceHammer.png') }}" class="justiceHammerImg" >
                                        <span class="innocenterBtn" >Innocenter</span>
                                    </a>

                                    <div id="reportCardSentenceDiv{{ index }}" class="reportCardSentenceDiv">
                                        {# Status author si actuellement muted/banned #}
                                        <div id="authorStatus{{ index }}" style="text-align:center;"></div>

                                        {# Toggle mute/ban modes #}
                                        <div style="display:inline-flex; justify-content:center; width:100%;">
                                            <span id="toggleMute{{ index }}" class="toggleSentence">
                                                <i class="fa-solid fa-volume-xmark sentenceIconModo"></i>
                                                <span> Mute</span>
                                            </span>
                                            <span id="toggleBan{{ index }}" class="toggleSentence">
                                                <i class="fa-solid fa-ban sentenceIconModo"></i>
                                                <span> Ban</span>
                                            </span>
                                            <span id="toggleNoPunish{{ index }}" class="toggleSentence sentenceActif">
                                                <i class="fa-solid fa-empty-set"></i>
                                                <span> Aucun</span>
                                            </span>
                                        </div>

                                        {# censure form #}
                                        <form class="reportCardCensureForm" action="{{ path('app_censureObject',{'objectType':report.objectType, 'objectId':report.objectId }) }}" method="post">

                                            {# Mode ban/mute JS #}
                                            <input id="sentenceType{{ index }}" type="hidden" name="mode" value="void" />

                                            {# Date fin de ban/mute si mode != aucun #}
                                            <div id="sentenceEndDateDiv{{ index }}" style="width:100%; text-align:center;">
                                                <label id="inputPunishEndDateLabel{{ index }}" for="endDate">Aucune pénalité</label>
                                                <input id="inputPunishEndDate{{ index }}" name="endDate" type="date" min="" value="" class="flatpickr-input" disabled>
                                            </div>

                                            {% if report.objectType == "topicPost" or report.objectType == "mediaPost" %}
                                                {% set objectType = "commentaire" %}
                                            {% else %}
                                                {% set objectType = report.objectType %}
                                            {% endif %}

                                            <input type="submit" value="Censurer le {{ objectType }}" class="censureBtn"></input>
                                        </form>

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

                        {% set index = index + 1 %}
                    {% endfor %}

                {% else %}

                    <p class="emptyListMsg">Aucun signalement en attente</p>
                    
                {% endif %}
            </div>

        </section>



        {# Ajax Preview cible reportCard + btn décisions #}
        <script>

            {% set index = 0 %}
            {% for report in reports %}

                // DateFinSentence minimum et defaut = aujourd'hui (backend:TODO)
                var now = new Date();
                var timezoneOffset = now.getTimezoneOffset() * 60000; 
                var today = new Date(now - timezoneOffset).toISOString().split('T')[0];
                var tomorrow = new Date(now.getTime() + 86400000);
                var tomorrowFormatted = tomorrow.toISOString().split('T')[0];

                document.getElementById('inputPunishEndDate{{ index }}').value = tomorrowFormatted;
                document.getElementById('inputPunishEndDate{{ index }}').setAttribute("min", tomorrowFormatted);

                // Toggle Affichage du détail de l'objet signalé (+ boutons décisions)
                document.getElementById('reportPreviewBtn{{ index }}').addEventListener('click', function() {

                    document.getElementById('preview{{ index }}').classList.toggle('notDisplayed');
                    document.getElementById('reportPreviewFactice{{ index }}').classList.toggle('notDisplayed');

                    // Marche mais pb à cause du "innerHTML +=" dans responseAjax
                    // document.querySelectorAll('.nbrReportsDetail{{ index}}').forEach(element => {
                    //     element.classList.toggle('notDisplayed');
                    // });

                    if(!document.getElementById('preview{{ index }}').classList.contains('notDisplayed')) {

                        // (Z-index inputDainputPunishEndDate marche pas) Fix:
                        document.getElementById('clickableContainer{{ index }}').addEventListener('click', function(event) {
                            event.stopPropagation();
                        });

                        // Toggle du mode Ban/Mute
                        document.getElementById('toggleMute{{ index }}').addEventListener('click', function() {
                            document.getElementById('sentenceType{{ index }}').value = "mute";
                            document.getElementById('inputPunishEndDateLabel{{ index }}').innerText = "Fin du mute: ";
                            document.getElementById('sentenceEndDateDiv{{ index }}').style.display = 'block';
                            document.getElementById('inputPunishEndDate{{ index }}').disabled = false;

                            document.getElementById('toggleNoPunish{{ index }}').classList.remove('sentenceActif');
                            document.getElementById('toggleBan{{ index }}').classList.remove('sentenceActif');
                            document.getElementById('toggleMute{{ index }}').classList.add('sentenceActif');
                        });
                        document.getElementById('toggleBan{{ index }}').addEventListener('click', function() {
                            document.getElementById('sentenceType{{ index }}').value = "ban";
                            document.getElementById('inputPunishEndDateLabel{{ index }}').innerText = "Fin du ban: ";
                            document.getElementById('sentenceEndDateDiv{{ index }}').style.display = 'block';
                            document.getElementById('inputPunishEndDate{{ index }}').disabled = false;

                            document.getElementById('toggleNoPunish{{ index }}').classList.remove('sentenceActif');
                            document.getElementById('toggleBan{{ index }}').classList.add('sentenceActif');
                            document.getElementById('toggleMute{{ index }}').classList.remove('sentenceActif');
                        });
                        document.getElementById('toggleNoPunish{{ index }}').addEventListener('click', function() {
                            document.getElementById('sentenceType{{ index }}').value = "void";
                            document.getElementById('inputPunishEndDateLabel{{ index }}').innerText = "Aucune pénalité";
                            document.getElementById('inputPunishEndDate{{ index }}').disabled = true;

                            document.getElementById('toggleNoPunish{{ index }}').classList.add('sentenceActif');
                            document.getElementById('toggleBan{{ index }}').classList.remove('sentenceActif');
                            document.getElementById('toggleMute{{ index }}').classList.remove('sentenceActif');
                        });


                        // Récup des id et type de l'objet
                        var objectType = document.getElementById('reportPreviewType{{ index }}').getAttribute('value');
                        var objectId = document.getElementById('reportPreviewId{{ index }}').getAttribute('value');

                        document.getElementById('reportContentDiv{{ index }}').classList.toggle('minHeightLoader');

                        // Affichage du loading (pendant ajax)
                        document.getElementById('spinningLoader{{ index }}').style.display = "block";
                        // Désactivation des boutons tant que reportCard pas chargée
                        // document.getElementById('reportCardInnocentDiv{{ index }}').style.pointerEvents = "none";
                        document.getElementById('reportCardInnocentDiv{{ index }}').style.filter = "grayscale(1)";
                        document.getElementById('reportCardInnocentDiv{{ index }}').style.opacity = "0.7";
                        // document.getElementById('reportCardSentenceDiv{{ index }}').style.pointerEvents = "none";sy
                        document.getElementById('reportCardSentenceDiv{{ index }}').style.filter = "grayscale(1)";
                        document.getElementById('reportCardSentenceDiv{{ index }}').style.opacity = "0.7";


                        // Ajax:
                        $.ajax({
                            url: '/reportDetails/' + objectType + '/' + objectId,
                            type: 'GET',
                            success: function(response) {

                                document.getElementById('reportDivHeader{{ index }}').classList.toggle('flexDirColumn');

                                // Détails des reports (par motif)
                                document.getElementById('reportPreviewMotifsDetails{{ index }}').innerHTML = "";

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


                                // Réactivation des boutons une fois reportCard chargée
                                // document.getElementById('reportCardInnocentDiv{{ index }}').style.pointerEvents = "default";
                                document.getElementById('reportCardInnocentDiv{{ index }}').style.filter = "grayscale(0)";
                                document.getElementById('reportCardInnocentDiv{{ index }}').style.opacity = "1";
                                // document.getElementById('reportCardSentenceDiv{{ index }}').style.pointerEvents = "default";
                                document.getElementById('reportCardSentenceDiv{{ index }}').style.filter = "grayscale(0)";
                                document.getElementById('reportCardSentenceDiv{{ index }}').style.opacity = "1";
                                

                                Object.entries(response.nbrReportsPerMotifArray).forEach(([key, value]) => {
                                    document.getElementById('reportPreviewMotifsDetails{{ index }}').innerHTML += "<span class='nbrReportsDetail{{ index }}' style='margin: 0 5px;'> <i class='fa-solid fa-minus'></i> " + `${key}:` + "<span class='strongNbr'> " + `${value}` + "</span></span><br>";
                                });


                                switch (response.objectType) {
                                    case "media":
                                        document.getElementById('detailText{{ index }}').innerHTML = "<i class='fa-solid fa-quote-left reportQuote'></i>" + response.object["title"] + "<i class='fa-solid fa-quote-right reportQuote'></i>";
                                        document.getElementById('detailPublishDate{{ index }}').innerText = publishDateDelay(response.object["date"]["date"]);
                                        // document.getElementById('detailGame{{ index }}').innerText = response.object["game"];
                                        document.getElementById('detailObjectAuthor{{ index }}').innerHTML = "par " + response.object["author"] + " (Censures: " + "<span class='strongNbr'>" + response.object["authorNbrCensures"] + "</span>)";
                                        document.getElementById('detailImg{{ index }}').src = "/img/uploads/" + response.object["img"];
                                        break;

                                    case "topic":
                                        document.getElementById('detailText{{ index }}').innerHTML = "<i class='fa-solid fa-quote-left reportQuote'></i>" + response.object["title"] + "<i class='fa-solid fa-quote-right reportQuote'></i>";
                                        document.getElementById('detailPublishDate{{ index }}').innerText = publishDateDelay(response.object["date"]["date"]);
                                        // document.getElementById('detailGame{{ index }}').innerText = response.object["game"];
                                        document.getElementById('detailObjectAuthor{{ index }}').innerHTML = "par " + response.object["author"] + " (Censures: " + "<span class='strongNbr'>" + response.object["authorNbrCensures"] + "</span>)";
                                        break;

                                    case "topicPost":
                                        document.getElementById('detailText{{ index }}').innerHTML = "<i class='fa-solid fa-quote-left reportQuote'></i>" + response.object["title"] + "<i class='fa-solid fa-quote-right reportQuote'></i>";
                                        document.getElementById('detailPublishDate{{ index }}').innerText = publishDateDelay(response.object["date"]["date"]);
                                        // document.getElementById('detailGame{{ index }}').innerText = response.object["game"];
                                        document.getElementById('detailObjectAuthor{{ index }}').innerHTML = "par " + response.object["author"] + " (Censures: " + "<span class='strongNbr'>" + response.object["authorNbrCensures"] + "</span>)";
                                        break;

                                    case "mediaPost":
                                        document.getElementById('detailText{{ index }}').innerText = response.object["title"];
                                        document.getElementById('detailPublishDate{{ index }}').innerText = publishDateDelay(response.object["date"]["date"]);
                                        // document.getElementById('detailGame{{ index }}').innerText = response.object["game"];
                                        document.getElementById('detailObjectAuthor{{ index }}').innerHTML = "par " + response.object["author"] + " (Censures: " + "<span class='strongNbr'>" + response.object["authorNbrCensures"] + "</span>)";
                                        break;
                                
                                    default:
                                        break;
                                }

                                // Récupération du status Author si actif (today < endDateStatus)
                                if(response.authorStatus == "muted" && response.authorDateEndStatus > today) {
                                    document.getElementById("authorStatus{{ index }}").innerHTML = "<span style='position:relative; top:5px;'>Status: <span class='strongNbr'>muted</span> (" + futureEndDateStatus(response.authorDateEndStatus.date) + ")</span>";
                                }
                                else if(response.authorStatus == "banned" && response.authorDateEndStatus > today)  {
                                    document.getElementById("authorStatus{{ index }}").innerHTML = "<span style='position:relative; top:5px;'>Status: <span class='strongNbr'>banned</span> (" + futureEndDateStatus(response.authorDateEndStatus.date) + ")</span>";
                                }
                            
                            },
                            complete: function(){
                                // On enlève le loading
                                console.log('terminé');
                                document.getElementById('spinningLoader{{ index }}').style.display = "none";
                                document.getElementById('reportContentDiv{{ index }}').classList.toggle('minHeightLoader');
                            },
                            error: function(xhr, status, error) {
                                window.FlashMessage.error('Erreur lors du chargement du signalement');
                            }
                        });

                    }
                    else {
                        document.getElementById('reportDivHeader{{ index }}').classList.toggle('flexDirColumn');

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

                        document.getElementById('reportPreviewMotifsDetails{{ index }}').innerHTML = "";
                    }


                });
                {% set index = index + 1 %}
            {% endfor %}


            // Transfo simmple dates -> il y a ...
            function publishDateDelay(dateSqlToCompare) {

                var dateActuelle = new Date();
                var dateComparaison = new Date(dateSqlToCompare);
                var difference = dateActuelle - dateComparaison;
                // milisecondes -> jour
                var differenceEnJours = Math.floor(difference / (1000 * 60 * 60 * 24));

                var phrase;
                if (differenceEnJours === 0) {
                    phrase = "publié aujourd'hui";
                } else if (differenceEnJours === 1) {
                    phrase = "publié hier";
                } else {
                    phrase = "publié il y a " + differenceEnJours + " jours";
                }

                return phrase;
            }


            // Transfo simmple dates -> nbr de jours restants
            function futureEndDateStatus(dateSqlToCompare) {

                var dateActuelle = new Date();
                var dateComparaison = new Date(dateSqlToCompare);
                var difference =  dateComparaison - dateActuelle;
                // milisecondes -> jour
                var differenceEnJours = Math.floor(difference / (1000 * 60 * 60 * 24));

                var phrase;
                if (differenceEnJours === 0) {
                    phrase = "Fin aujourd'hui";
                } else if (differenceEnJours === 1) {
                    phrase = "Fin demain";
                } else {
                    phrase = "Fin dans " + differenceEnJours + " jours";
                }

                return phrase;
            }

        </script>





        <section class="sectionContainer modoSection modoSectionRed">

            <div>
                <div class="modoSubTitle1BgCensor" style="background-color:#dc2e2e;"></div>
                <h3 class="gameSubtitle test noMarginBottom" style="color:white;"><i class="fa-solid fa-virus-slash"></i> <strong style="margin-left:14px;">Censures</strong></h3>
            </div>

            {{ form_start(formAddCensoredWord) }}
                <div class="inline addCensorSubDiv">
                    {{ form_widget(formAddCensoredWord.word) }} 
                    {{ form_widget(formAddCensoredWord.submit) }}
                </div>
            {{ form_end(formAddCensoredWord) }}
            
            <div class="censuredWordsList">
                {% for censureWord in censureWords %}
                    <article style="display:inline-flex; justify-content:space-around; padding: 5px 0; border-bottom:1px solid rgba(255,255,255,0.2);">
                        <span style="width:100px; font-family:'K2D', sans-serif;">"<span style="color:#ff5151;font-weight:bold;">{{ censureWord.word }}</span>"</span>
                        <div style="font-family:'K2D', sans-serif;">
                            <span style="width:100px;">{{ time_diff(censureWord.creationDate) }}</span>
                            <span style="width:100px;">par {{ censureWord.user.pseudo|capitalize }}</span>
                            <a href="{{ path('app_deleteCensure', {'id': censureWord.id }) }}" style="margin:0px 2px;">
                                <i class="fa-solid fa-xmark redModo deleteWord"></i>
                            </a>
                        </div>
                    </article>
                {% endfor %}
            </div>



        </section>


    </main>

{% endblock %}