{% extends 'base/adminbase.html.twig' %}
{% block title %}{% trans %}Bannières{% endtrans %}{% endblock %}
{% block body %}

<div class="form">
    <h2 class="form_title">{% trans %} Bannières{% endtrans %} </h2>

    {% block flash %}
    {% include 'base/flash.html.twig' %}
    {% endblock %}

    <div class="mt-4 row d-flex ">
        <div class="col-12">
            Ces images et textes se trouvent dans la bannière principale. Il est préferable de n'en marquer que cinq au
            maximum comme étant visibles.
        </div>
    </div>
    <div class="mb-4 row d-flex ">
        <div class="col-12 text-right">
            <a href="{{ path('admin_hero_new')}}" class="btn btn_add" data-toggle="tooltip"
                data-placement="top" title="{% trans %}Ajouter une bannière{% endtrans %}" class="text-center">
                          </a>
        </div>
    </div>
    <div class="row d-flex ">
        <div class=" col-12 text-right">
            <table class="table table-striped table-admin">
                <thead>
                    <tr>
                        <th class="text-left ">Position</th>
                        <th class="text-left ">Nom de la bannière</th>
                        <th class="text-left ">Titre</th>
                        <th class="text-left ">Image</th>
                        <th class="text-left ">Visible ?</th>
                        <th style="width: 20%" colspan="3" data-toggle="tooltip" data-placement="top"
                            title="{% trans %}Actions{% endtrans %}" class="text-center"><i class=" fas fa-cog"></i>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for hero in heros %}
                    <tr>
                        <td class="text-left ">{{ hero.ranking }}</td>
                        <td class="text-left ">{{ hero.name }}</td>
                        <td class="text-left">{{ hero.title }}</td>
                        <td class="text-left">
                            {% if hero.imagename %}
                            <img src="{{ vich_uploader_asset(hero, 'imageFile')| imagine_filter('thumb') }}"
                                class="category_image_index">
                            {% else %}
                          {#  <img src="{{ '/images/labels/pasphoto.png'}}" alt="pas d'image" class="img_marker"> #} 
                            {% endif %}
                        </td>
                        <td class="text-left ">
                            {% if hero.display == 1 %}
                            <i class="fa-solid fa-check"></i>
                            {% else %}
                            <i class="fa-solid fa-x"></i>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            <a data-toggle="tooltip" data-placement="top"
                                title="{% trans %}Modifier la bannière{% endtrans %}"
                                href="{{ path('admin_hero_edit', {'id': hero.id}) }}"
                                class="btn btn-warning btn_edit "><i class="fa-solid fa-pen-to-square"></i></a>
                            <span data-toggle="tooltip" title="{% trans %}Supprimer la bannière{% endtrans %}">
                                <a data-toggle="modal" data-target="#heroDelete{{ hero.id }}" data-placement="top"
                                    href="{{ path('admin_hero_delete', {'id': hero.id}) }}"
                                    class="btn btn-danger category_delete"><i class="fa-solid fa-trash-can"></i></a>
                            </span>
                        </td>
                        <!-- Modal -->
                        <div class="modal fade" id="heroDelete{{ hero.id }}" tabindex="-1" role="dialog"
                            aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">{% trans %}Attention !{% endtrans %}</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body mbody">
                                        {% trans %}La bannière sera définitivement supprimée.{% endtrans %}
                                    </div>
                                    <div class="modal-footer d-flex justify-content-center">
                                        <button type="button" class="btn btn-danger btn_cancel"
                                            data-dismiss="modal">{% trans %}Annuler{% endtrans %}</button>
                                        <a href="{{  path('admin_hero_delete', {'id': hero.id}) }}"
                                            class="btn btn_ok mbtn">{% trans %}OK{% endtrans %}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% else %}
                        <td colspan="6" class="text-center">{% trans %}Il n'y a aucune bannière.{% endtrans %}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}