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

{% block title %}Images accueil{% endblock %}

{% block body %}
    <h5 style="text-align:center;">Gestion des images de la page accueil</h5>
{% for type, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ type }}" role="alert">
            {{ message }}
        </div>
    {% endfor %}
{% endfor %}
    <table id="imagesTable"  class="table table-striped table-bordered" style="margin:3%; font-size: 13px;">
        <thead class="table-primary">
              <tr>
                <th>Id</th>
                <th>Image</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for images_home in images_homes %}
            <tr>
                <td>{{ images_home.id }}</td>
                <td>
                    {% if images_home.image %}
                        <img src="{{ asset('upload/images/' ~ images_home.image ) }}" alt="Image de {{ images_home.image }}" style="max-width:100px;">
                    {% else %}
                        <span>Pas d'image</span>
                    {% endif %}
                </td>
                <td>
                    <a href="{{ path('app_images_home_show', {'id': images_home.id}) }}"  class="btn btn-success custom-button" style="font-size:12px;margin-bottom:2%;padding:5px;width:28%;">Afficher</a><br>
                    <a href="{{ path('app_images_home_edit', {'id': images_home.id}) }}"  class="btn btn-success custom-button" style="font-size:12px;margin-bottom:2%;padding:5px; width:28%;">Éditer</a><br>
 <!-- Delete Form Section -->
   
        <form method="post"  action="{{ path('app_images_home_delete', {'id': images_home.id}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ images_home.id) }}">
    
    <!-- Delete Button with Bootstrap Styling -->
    <button type="submit" class="btn btn-success custom-button" style="background-color:red!important;margin-bottom:2%;font-size:12px;padding:5px;width:28%;">
         Supprimer
    </button>
</form>
    
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="3">Pas d'enregistrements trouvés..</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <a href="{{ path('app_images_home_new') }}" class="btn btn-success custom-button" style="font-size:12px;">Créer une nouvelle image</a>

    <!-- Initialize DataTables -->
    <script>
        $(document).ready(function() {
            $('#imagesTable').DataTable({
                "language": {
                    "sSearch": "Recherche :",
                    "lengthMenu": "Afficher _MENU_ résultats",
                    "zeroRecords": "Aucun acte trouvé",
                    "info": "Affichage de _START_ à _END_ sur _TOTAL_ actes",
                    "infoEmpty": "Affichage de 0 à 0 sur 0 actes",
                    "infoFiltered": "(filtré à partir de _MAX_ actes)"
                },
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true,
                "info": true
            });
        });
    </script>
<style>
button.btn.btn-danger.btn-sm {
    font-size: 12px !important;
    margin-top: 4px;
}
button.btn.btn-success.custom-button {
    margin-top: 3px!important;
    font-size: 12px!important;
    padding: 5px 5px!important;
}
</style>
{% endblock %}