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

{% block title %}Notifications{% endblock %}

{% block body %}
    <main role="main" class="p-xl-5 p-sm-1" id="notifications_page">
        <div class="container-md">

            <div class="row">
                <div class="col-xl-12" id="notifications_section">
                    <h1 class="text-center text mb-4">NOTIFICATIONS</h1>
                    <div class="row">
                        {% for notification in propositions %}
                            <div class="col-12 mb-2" id="notifications_content">
                                <div class="row">
                                    <div class="col-xl-1 text-right">
                                        <a class="btn text-danger" href="{{ path("notification_reading", {"id": notification.id} ) }}"><i class="fas fa-times"></i></a>
                                    </div>

                                    <div class="col-xl-11">
                                        {% if notification.type == "proposition" %}
                                            <span class="badge badge-primary badge-pill mb-1">Proposition</span>
                                            <p class="text mb-0">{{ notification.content }}</p>
                                            <a class="btn text-primary" href="{{ path("notification_accept_offers", {"id": notification.id, "offer": notification.originMember.id, "duty": notification.duty.id} ) }}"><i class="fas fa-check"></i> Accepter </a>
                                        {% elseif notification.type == "validation" %}
                                            <span class="badge badge-secondary badge-pill mb-1">Validation</span>
                                            <p class="text mb-0">{{ notification.content }}</p>
                                            <a class="btn text-secondary" href="{{ path("notification_confirm", {"id": notification.id, "asker": notification.originMember.id, "duty": notification.duty.id} ) }}"> Valider </a>
                                        {% elseif notification.type == "done" %}
                                            <span class="badge badge-success badge-pill mb-1">Fin de tâche</span>
                                            <p class="text mb-0">{{ notification.content }}</p>
                                            <a class="btn text-success" href="{{ path("notification_done", {"id": notification.id, "offer": notification.originMember.id, "duty": notification.duty.id} ) }}"> Tâche effectuée </a>
                                        {% elseif notification.type == "warning" %}
                                            <span class="badge badge-danger badge-pill mb-1">Attention</span>
                                            <p class="text mb-0">{{ notification.content }}</p>
                                            <a class="btn text-danger" href="#">Votre annonce à été mise en retrait pour le motif suivant : {{ notification.content }}</a>
                                        {% elseif notification.type == "verification" %}
                                            <span class="badge badge-accent badge-pill mb-1">Vérification</span>
                                            <p class="text mb-0">{{ notification.content }}</p>
                                            <a class="btn text-accent" href="{{ path("duties_to_check") }}">Vous avez des annonces ou types d'annonces à vérifier ! Veuillez regarder dans votre espace administrateur</a>
                                        {% else %}
                                            <span class="badge badge-gray badge-pill mb-1">Divers</span>
                                            <p class="text mb-0">{{ notification.content }}</p>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </main>
{% endblock %}