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


{% block body %}

{% if app.user %}

<section id="commentaires">

    <h1> Les Propositions du groupes {{ groupe.titreGroupe }} : </h1> <br>

    <a href="{{path('proposition_create', { 'id': groupe.id  } ) }}" type="button" class="btn btn-info">Créer
        une nouvelle proposition</a>
    {% if app.user == groupe.admin %}
    <a href="{{path('GroupePropositionSignaler', {'id': groupe.id }) }}" class="btn btn-warning">Voir les propositions
        signaler</a>
    <a href="{{path('GroupeUser', {'id': groupe.id }) }}" class="btn btn-warning"> Membres</a>
    {% endif %}
    <br><br>

    {% for proposition in groupe.propositions %}
    <article>
        <h2>{{ proposition.title }}</h2>
        <div class="metadata"> Ecrit le {{ proposition.createdAt | date ('d/m/Y') }} à {{ proposition.createdAt |
            date('H:i')}} dans la catégorie politique</div>
        <div class="content">

            {{ proposition.content | raw }} <br>
            <a href="{{path('proposition_show', {'id': proposition.id }) }}" class="btn btn-primary ">Lire la suite</a>
            <a href="{{path('proposition_signaler', {'id': proposition.id }) }}" class="btn btn-danger ">signaler</a>
            <a href="{{ path('proposition_like',{'id': proposition.id }) }}" class="btn btn-link js-like">
                {% if app.user and proposition.isLikedByUser(app.user) %}
                <i class="fas fa-thumbs-up"></i>
                {% else %}
                <i class="far fa-thumbs-up"></i>
                {% endif %}
                <span class="js-likes">{{proposition.likes | length}}</span>
                <span class="js-label">J'aime</span>
            </a>

            <a href="{{ path('proposition_dislike',{'id': proposition.id }) }}" class="btn btn-link js-dislike">
                {% if app.user and proposition.isDislikedByUser(app.user) %}
                <i class="fas fa-thumbs-down"></i>
                {% else %}
                <i class="far fa-thumbs-down"></i>
                {% endif %}
                <span class="js-dislikes">{{proposition.dislikes | length}}</span>
                <span class="js-label">J'aime pas</span>
            </a>
        </div>
    </article>
    <br>
    {% endfor %}


</section>
{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    function onClickBtnLike(event) {
        event.preventDefault();
        const url = this.href;
        const icone = this.querySelector('i');
        const spanCount = this.querySelector('span.js-likes');
        axios.get(url).then(function (response) {
            console.log(response);
            spanCount.textContent = response.data.likes;
            if (icone.classList.contains('fas')) {
                icone.classList.replace('fas', 'far');
            }
            else {
                icone.classList.replace('far', 'fas');
            }
        }).catch(function (error) {
            if (error.response.status === 403) {
                window.alert("Vous ne pouvez pas liker une proposition si vous n'êtes pas connecté!");
            } else {
                window.alert("Une erreur s'est produite, réessayez plus tard.");
            }
        });
    }
    document.querySelectorAll('a.js-like').forEach(function (link) {
        link.addEventListener('click', onClickBtnLike);
    })

    function onClickBtnDislike(event) {
        event.preventDefault();
        const url = this.href;
        const icone = this.querySelector('i');
        const spanCount = this.querySelector('span.js-dislikes');
        axios.get(url).then(function (response) {
            console.log(response);
            spanCount.textContent = response.data.dislikes;
            if (icone.classList.contains('fas')) {
                icone.classList.replace('fas', 'far');
            }
            else {
                icone.classList.replace('far', 'fas');
            }
        }).catch(function (error) {
            if (error.response.status === 403) {
                window.alert("Vous ne pouvez pas disliker une proposition si vous n'êtes pas connecté!");
            } else {
                window.alert("Une erreur s'est produite, réessayez plus tard.");
            }
        });
    }
    document.querySelectorAll('a.js-dislike').forEach(function (link) {
        link.addEventListener('click', onClickBtnDislike);
    })
</script>
{% endblock %}
{% endif %}
{% endblock %}