{% extends '@PrestaShop/Admin/layout.html.twig' %}

{% block content %}
<div class="row content">
    {% include '@Modules/polarisprestatheme/views/templates/admin/nav.html.twig' %}

    <div class="container-admin">
        <div class="header">
                <h3 class="card-header-title">Configuration du diaporama</h3>
                    <p class="intro-form">Cette section vous permet de gérer les diaporama de votre site.<br>
                        - Cliquez sur l’icône de visibilité pour activer ou désactiver un slider<br>
                        - Utilisez les icônes d’édition et de suppression pour modifier ou supprimer un diaporama.<br>
                        - Cliquez sur l’icône <span class="material-icons"> add</span> en haut à droite pour ajouter un nouveau diaporama.<br>
                        - Cliquez sur l’icône <span class="material-icons">settings</span> en haut à droite pour parametrer l'aspect de votre diaporama.<br>
                    </p>
        </div>
        <div class="tab-content">
            <div class="panel-heading">Diaporama 
                <a class="action-link add" style="float:right" href="{{path('admin_presta_slider' , {id: -1, action:'add' , group_id: group_id })}}"><span class="material-icons">add</span></a>
             </div>
            <p class="intro-form">Cette section vous permet de gérer les diaporama de votre site.<br>
            - Cliquez sur l’icône de visibilité pour activer ou désactiver un slider<br>
            - Utilisez les icônes d’édition et de suppression pour modifier ou supprimer un diaporama.<br>
            - Cliquez sur l’icône <span class="material-icons"> add</span> en haut à droite pour ajouter un nouveau diaporama.<br>
            </p>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Titre</th>
                        <th>Image</th>
                        <th>Etat</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for slider in sliders %}
                        <tr>
                            <td>{{ loop.index }}</td>
                            <td>{{ slider.title }}</td>
                            <td>
                                <img style="max-width:75px; border: 1px solid #ddd;" src="{{ slider.image }}"/>
                            </td>
                            <td>
                                <a href="#" class="toggle-visibility" 
                                    data-id="{{ loop.index0 }}" 
                                    data-objet="configSlider" 
                                    data-url="{{ path('admin_presta_toggle_visibility') }}">
                                    {% if slider.isVisible %}
                                        <span style="color:green" class="material-icons">check</span>
                                    {% else %}
                                        <span style="color:red" class="material-icons">close</span>
                                    {% endif %}
                                </a>
                            </td>
                            <td>
                                <a href="{{ path('admin_presta_slider', {id: slider.id , action: 'edit' , group_id: group_id}) }}">
                                    <span class="material-icons">edit</span>
                                </a>
                                <a href="{{ path('admin_presta_slider', {id: slider.id , action: 'delete' , group_id: group_id}) }}">
                                    <span class="material-icons">delete</span>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}
