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

{% block title %}Galerie - Village de Menotey{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
.gallery-image {
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.gallery-image:hover {
    transform: scale(1.05);
}

.gallery-category {
    margin-bottom: 3rem;
}

.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
}

.lightbox img {
    width: 100%;
    height: auto;
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.filter-gallery {
    margin-bottom: 2rem;
}

.filter-btn-gallery {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
    border-radius: 25px;
    padding: 8px 20px;
    margin: 5px;
    transition: all 0.3s ease;
}

.filter-btn-gallery.active,
.filter-btn-gallery:hover {
    background: var(--primary-color);
    color: white;
}

/* Responsive Mobile Fixes pour la galerie */
@media (max-width: 768px) {
    /* Galerie - 2 colonnes en mobile avec images paysage */
    .gallery-category .row .col-lg-3,
    .gallery-category .row .col-md-4,
    .gallery-category .row .col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    /* Images en format paysage en mobile */
    .gallery-image {
        height: 150px !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    
    /* Lightbox beaucoup plus grand sur mobile */
    .lightbox-content {
        width: 98% !important;
        max-height: 85% !important;
        object-fit: cover !important;
        margin: 0 !important;
    }
    
    .lightbox img {
        width: 100% !important;
        height: auto !important;
        max-height: 85vh !important;
        object-fit: contain !important;
    }
    
    /* Bouton fermer plus accessible en mobile */
    .close-lightbox {
        top: 10px !important;
        right: 15px !important;
        font-size: 30px !important;
        background: rgba(0,0,0,0.7) !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
</style>
{% endblock %}

{% block body %}
<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center">
                <h1>Galerie Photos</h1>
                <p class="lead">Découvrez Menotey en images</p>
            </div>
        </div>
    </div>
</section>

<!-- Filter Section -->
<section class="section bg-light">
    <div class="container">
        <div class="filter-gallery text-center">
            <h3 class="mb-4">Catégories</h3>
            <button class="filter-btn-gallery active" data-filter="all">Toutes</button>
            {% for category in photo_categories %}
                <button class="filter-btn-gallery" data-filter="{{ category.name|lower }}">{{ category.name }}</button>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Gallery Section -->
<section class="section">
    <div class="container">
        {% for category in photo_categories %}
        <div class="gallery-category" data-category="{{ category.name|lower }}">
            <h3 class="text-center mb-4 text-primary">{{ category.name }}</h3>
            
            <div class="row g-4">
                {% for photo in category.photos %}
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="card border-0 shadow-sm">
                        <img src="https://placehold.co/400x250/8fbc8f/ffffff?text={{ category.name|url_encode }}+{{ loop.index }}" 
                             class="card-img-top gallery-image" 
                             alt="{{ category.name }} {{ loop.index }}"
                             onclick="openLightbox(this)">
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</section>

<!-- Statistics Section -->
<section class="section bg-light">
    <div class="container">
        <div class="section-title">
            <h2>En chiffres</h2>
            <p>Notre galerie en quelques statistiques</p>
        </div>
        
        <div class="row text-center g-4">
            <div class="col-md-3">
                <div class="card border-0">
                    <div class="card-body">
                        <i class="fas fa-camera fa-3x text-primary mb-3"></i>
                        <h3 class="text-primary">150+</h3>
                        <p class="text-muted">Photos</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card border-0">
                    <div class="card-body">
                        <i class="fas fa-calendar fa-3x text-success mb-3"></i>
                        <h3 class="text-success">24</h3>
                        <p class="text-muted">Événements documentés</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card border-0">
                    <div class="card-body">
                        <i class="fas fa-eye fa-3x text-warning mb-3"></i>
                        <h3 class="text-warning">5000+</h3>
                        <p class="text-muted">Vues</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card border-0">
                    <div class="card-body">
                        <i class="fas fa-heart fa-3x text-danger mb-3"></i>
                        <h3 class="text-danger">850+</h3>
                        <p class="text-muted">Likes</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contribute Section -->
<section class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card border-0 bg-primary text-white">
                    <div class="card-body text-center p-5">
                        <h3 class="mb-4">Partagez vos photos</h3>
                        <p class="lead mb-4">Vous avez des photos de Menotey à partager ? Envoyez-les nous pour enrichir notre galerie !</p>
                        <a href="{{ path('app_contact') }}" class="btn btn-light btn-lg">
                            <i class="fas fa-upload"></i> Envoyer des photos
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Lightbox -->
<div id="lightbox" class="lightbox" onclick="closeLightbox()">
    <span class="close-lightbox" onclick="closeLightbox()">&times;</span>
    <div class="lightbox-content">
        <img id="lightbox-image" src="" alt="">
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
// Gallery filter functionality
document.addEventListener('DOMContentLoaded', function() {
    const filterButtons = document.querySelectorAll('.filter-btn-gallery');
    const galleryCategories = document.querySelectorAll('.gallery-category');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            const filter = this.dataset.filter;
            
            // Update active button
            filterButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            // Filter categories
            galleryCategories.forEach(category => {
                if (filter === 'all' || category.dataset.category === filter) {
                    category.style.display = 'block';
                } else {
                    category.style.display = 'none';
                }
            });
        });
    });
});

// Lightbox functionality
function openLightbox(img) {
    const lightbox = document.getElementById('lightbox');
    const lightboxImage = document.getElementById('lightbox-image');
    
    lightboxImage.src = img.src;
    lightboxImage.alt = img.alt;
    lightbox.style.display = 'block';
    
    // Prevent body scroll
    document.body.style.overflow = 'hidden';
}

function closeLightbox() {
    const lightbox = document.getElementById('lightbox');
    lightbox.style.display = 'none';
    
    // Restore body scroll
    document.body.style.overflow = 'auto';
}

// Close lightbox with escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeLightbox();
    }
});
</script>
{% endblock %}