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

{% block title %}Admin TAM : Rapports d'activité{% endblock %}

{% block body %}
    <main>
        {% include "partials/_left_banner.html.twig" %}
            <section class="reports section">
                <p id="rubricInfo" class="admin-title">En-tête</p>

                {# En-tête #}
                <section>
                    <h1 class="section__title">{{ rubricInfo.title }}</h1>
                    {% if rubricInfo.getGalleryImage is not empty %}
                    <img  class="section__image" src="{{ asset(rubricInfo.getGalleryImage.path) }}" alt="{{ rubricInfo.getGalleryImage.alt }}">
                    {% endif %}
                    <div class="subsection__text">{{ rubricInfo.text|quill_html|raw }}</div>
                </section>
                {% include "back/partials/_rubric_info_form.html.twig" %}

                {# Rapports d'activité #}
                <section>
                    <p id="reports-anchor" class="admin-title">Rapports d'activité</p>
                    <div id="reportsContainer" class="reports__list">
                        {% for report in reports %}
                        <div class="subsection-border element-to-move" data-id="{{ report.id }}">
                        <button class="position-button upButton">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                fill="currentColor" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M1.646 11.354a.5.5 0 0 0 .708 0L8 5.707l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 0 .708"/>
                            </svg>
                        </button>
                        <button class="position-button downButton">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                fill="currentColor" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
                            </svg>
                        </button>
                            <div class="reports__list-text">
                                <a href="{{ asset(report.path) }}">
                                    <img src="{{ asset(report.image) }}" alt="">
                                    </a>
                                <p>{{ report.description }}</p>
                            </div>
                            <div class="modify__buttons">
                                <form method="post" action="{{ path(app.current_route ~ '_delete', {id: report.id}) }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ report.id) }}">
                                    <button class="delete__button">Supprimer</button>
                                </form>
                                <a href="{{ path('admin_reports_update', {id:report.id}) }}" class="update__button">Modifier</a>
                            </div>
                        </div>
                        {% endfor %}
                        <button id="reports_reorder" class="reorder">Enregistrer l'ordre des rapports</button>
                    </div>
                </section>
                <section class="form">
                    {{ form(reportsForm) }}
                </section>

                {# Sections #}
                <section id="reportsSections">{% include "back/partials/_sections.html.twig" %}</section>

            </section>
        {% include "partials/_right_banner.html.twig" %}
    </main>
{% endblock %}