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

{% block title %}{{ isEdit ? 'Modifier la galerie' : 'Nouvelle galerie' }}{% endblock %}

{% block breadcrumb %}Galeries <i class="fas fa-chevron-right"></i> {{ isEdit ? 'Modifier la galerie' : 'Nouvelle galerie' }}{% endblock %}

{% block stylesheets %}
    <style>
        .form-card { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 20px; }
        .form-header { padding: 1.5rem; border-bottom: 1px solid #e2e8f0; }
        .form-body { padding: 2rem; }
        .form-group { margin-bottom: 1.5rem; }
        .form-label { font-weight: 600; color: #475569; margin-bottom: 0.5rem; display: block; }
        .form-control { width: 100%; padding: 0.75rem; border: 1px solid #e2e8f0; border-radius: 8px; }
        .form-control:focus { outline: none; border-color: var(--colorTheme); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
        .btn-primary { background: var(--primary-gradient); border: none; padding: 0.75rem 2rem; border-radius: 8px; font-weight: 600; color: white; }
        .btn-secondary { background: #e2e8f0; color: #475569; border: none; padding: 0.75rem 2rem; border-radius: 8px; font-weight: 600; }
        .images-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
        .image-item { position: relative; border-radius: 8px; overflow: hidden; }
        .image-item img { width: 100%; height: 200px; object-fit: cover; }
        .image-item-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); padding: 0.5rem; }
        .image-item-title { color: white; font-size: 0.875rem; margin: 0; }
    </style>
{% endblock %}

{% block body %}
    {% for label, messages in app.flashes %}
        <div class="alert alert-{{ label == 'error' ? 'danger' : label }} alert-dismissible fade show">
            {% for message in messages %}{{ message }}{% endfor %}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}

    <div class="form-card">
        <div class="form-header">
            <h2 class="mb-0" style="font-size: 1.5rem; font-weight: 700; color: #1e293b;">
                <i class="fas fa-{{ isEdit ? 'edit' : 'plus-circle' }}" style="color: var(--colorTheme);"></i>
                {{ isEdit ? 'Modifier la galerie' : 'Nouvelle galerie' }}
            </h2>
        </div>

        <div class="form-body">
            <form method="post">
                <div class="form-group">
                    <label class="form-label" for="name">Nom de la galerie *</label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ gallery ? gallery.name : '' }}" required placeholder="Ex: Photos de l'événement 2024">
                </div>

                <div class="form-group">
                    <label class="form-label" for="description">Description</label>
                    <textarea class="form-control" id="description" name="description" rows="3" placeholder="Description de la galerie">{{ gallery ? gallery.description : '' }}</textarea>
                </div>

                <div class="d-flex gap-3">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> {{ isEdit ? 'Enregistrer' : 'Créer la galerie' }}</button>
                    <a href="{{ path('bo-galleries') }}" class="btn btn-secondary"><i class="fas fa-times"></i> Annuler</a>
                </div>
            </form>

            {% if gallery %}
                <hr style="margin: 2rem 0;">

                <h3 style="font-size: 1.25rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem;">
                    <i class="fas fa-images" style="color: var(--colorTheme);"></i> Images de la galerie ({{ gallery.images|length }})
                </h3>

                <form method="post" action="{{ path('bo-gallery-add-image', {id: gallery.id}) }}" enctype="multipart/form-data" style="background: #f8fafc; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem;">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Image *</label>
                                <input type="file" class="form-control" name="image" accept="image/*" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Titre</label>
                                <input type="text" class="form-control" name="title" placeholder="Titre de l'image">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Texte alternatif</label>
                                <input type="text" class="form-control" name="alt" placeholder="Description">
                            </div>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100"><i class="fas fa-upload"></i> Ajouter</button>
                        </div>
                    </div>
                </form>

                {% if gallery.images|length > 0 %}
                    <div class="images-grid">
                        {% for image in gallery.images %}
                            <div class="image-item">
                                <img src="{{ asset('uploads/galleries/' ~ image.filename) }}" alt="{{ image.alt }}">
                                <div class="image-item-overlay">
                                    <p class="image-item-title">{{ image.title ?: 'Sans titre' }}</p>
                                    <form method="post" action="{{ path('bo-gallery-image-delete', {id: image.id}) }}" style="display: inline;">
                                        <button type="button" class="btn btn-sm btn-danger" style="position: absolute; top: 0.5rem; right: 0.5rem;" onclick="showConfirmModal({
                                            title: 'Supprimer l\'image',
                                            message: 'Êtes-vous sûr de vouloir supprimer cette image ?',
                                            actionText: 'Supprimer',
                                            onConfirm: () => this.closest('form').submit()
                                        })"><i class="fas fa-trash"></i></button>
                                    </form>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-4" style="background: #f8fafc; border-radius: 8px;">
                        <i class="fas fa-image" style="font-size: 3rem; color: #cbd5e1;"></i>
                        <p style="color: #94a3b8; margin: 1rem 0 0;">Aucune image dans cette galerie</p>
                    </div>
                {% endif %}
            {% endif %}
        </div>
    </div>
{% endblock %}