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


{% block body %}

{% if app.user %}

<section id="commenteires">
    <h1> Vos Propositions : </h1>
    {% for proposition in app.user.propositions %}
    <article id="prop">
        <h2>{{ proposition.title }}</h2>
        <div class="metadata"> Ecrit le {{ proposition.createdAt | date ('d/m/Y') }} à {{ proposition.createdAt |
            date('H:i')}} dans la catégorie {{ proposition.category.title }}</div>
            
        <img id="minia" src="/SiteDemocratie/public/{{ vich_uploader_asset(proposition) }}" alt="{{ proposition.title }}" />
        
                         
        <div class="content">

            {{ proposition.content | raw }} <br><br>
            <a href="{{path('proposition_show', {'id': proposition.id }) }}" class="btn btn-primary ">Lire la suite</a>

            <a href="{{path('proposition_edit', {'id': proposition.id }) }}" class="btn btn-warning ">Editer</a>
            <a href="{{path('proposition_delete', {'proposition': proposition.id }) }}" class="btn btn-danger ">Delete</a>
            <br>
            <br>
            {% if proposition.dateFinVote is null %}
            <form action="{{path('vote_add', {'id': proposition.id} ) }}" method="post">
         <div>
            <input placeholder="Entrez une date pour la fin du vote (ex:2021-06-20)..."  name="dateFinVote"
            type="string" class="form-control" required>
        </div>
         <div>
            <input type="submit" class="btn btn-success" value="Activez le vote!">
        </div>
     </form>
     {% else %}
    <p> Le vote prendra fin le {{proposition.dateFinVote | date ('d/m/Y') }} <p>
     {% endif %}
        </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 %}