{% extends 'accueil/accueil_admin.html.twig' %}

{% block title %}Emusic - MODELES{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
    <style>
        /* Style pour les rectangles des modèles */
        .modele-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin: 20px 0;
        }
        .modele-box {
            width: 380px;
            height: 60px;
            padding: 20px;
            background-color: #181b22;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        .modele-libelle {
            font-size: 18px;
            font-weight: normal;
            color: #a0a1a3;
            margin-bottom: 20px;
        }
        /* Style pour les boutons */
        .modele-actions {
            position: absolute;
            bottom: 15px;
            right: 0px;
        }
        .modele-actions a {
            margin-left: 10px;
            color: #fff;
            border-radius: 5px;
            text-decoration: none;
        }

    </style>
{% endblock %}

{% block body %}
    <div class="content">
        <h1>LISTE DES MODELES</h1></br>
            <div class="bouton" style="float:right; margin-right:5px;">
        <a href="{{ path('app_modele_ajouter') }}" class="btn">Ajouter un modèle</a>
    </div>
    <br><br><br><br>
        <div class="modele-container">
            {% for i in pModele %}
                <div class="modele-box">
                    <div class="modele-libelle">{{ i.nom }}</div>
                    <div class="modele-actions">
                        <a href="{{ path('app_modele_supprimer', {'id': i.id}) }}" onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce modèle ?');">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="white" viewBox="0 0 24 24" stroke-width="2" class="icon icon-tabler icon-tabler-trash">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M10 11v6M14 11v6M5 6l1 14h12l1-14"></path>
                            </svg>
                        </a>
                        <a href="{{ path('app_modele_modifier', {'id': i.id}) }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="white" viewBox="0 0 24 24" stroke-width="2" class="icon icon-tabler icon-tabler-pencil">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13 3l8 8-10 10H3v-8L13 3z"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            {% else %}
                <p>Aucun modèle n'a été trouvé.</p>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {# Vous pouvez ajouter des scripts JavaScript personnalisés ici si nécessaire #}
{% endblock %}