{% extends 'shop/base.html' %}
{% load static %}

{% block title %}Galerie - Kasico Art & Design{% endblock %}

{% block content %}
<div class="content-container">
    <!-- Gallery Header -->
    <div class="text-center mb-5">
        <img data-src="{% static 'images/kasicoLogo.png' %}" 
             alt="Kasico Art & Design Logo" 
             class="img-fluid mb-4 furry-lazy-image"
             style="max-width: 200px; height: auto;">
        <h1 class="display-5 fw-bold mb-4">Unsere Fursuit Galerie</h1>
        <p class="lead">Entdecken Sie unsere handgefertigten Kreationen und lassen Sie sich inspirieren</p>
    </div>

    <!-- Filter Section -->
    <div class="furry-card mb-4" style="background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));">
        <form method="get" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label for="category" class="form-label text-white">Kategorie</label>
                <select name="category" id="category" class="form-select border-0">
                    <option value="">Alle Kategorien</option>
                    {% for category in categories %}
                    <option value="{{ category.slug }}" {% if selected_category == category.slug %}selected{% endif %}>
                        {{ category.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4">
                <label for="style" class="form-label text-white">Stil</label>
                <select name="style" id="style" class="form-select border-0">
                    <option value="">Alle Stile</option>
                    {% for style in styles %}
                    <option value="{{ style.slug }}" {% if selected_style == style.slug %}selected{% endif %}>
                        {{ style.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-light w-100">
                    <i class="fas fa-filter me-2"></i> Filter anwenden
                </button>
            </div>
        </form>
    </div>

    <!-- Gallery Grid -->
    <div class="row g-4" id="gallery">
        {% for item in gallery_items %}
        <div class="col-md-6 col-lg-4">
            <div class="furry-card gallery-item h-100" data-bs-toggle="modal" data-bs-target="#galleryModal{{ item.id }}">
                <div class="position-relative">
                    <img data-src="{{ item.image.url }}" 
                         alt="{{ item.title }}" 
                         class="img-fluid rounded-3 furry-lazy-image"
                         style="width: 100%; height: 300px; object-fit: cover;">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus fa-2x"></i>
                    </div>
                </div>
                <div class="p-3">
                    <h3 class="h5 mb-2">{{ item.title }}</h3>
                    <p class="text-muted mb-2">{{ item.description|truncatewords:20 }}</p>
                    <div class="d-flex flex-wrap gap-2">
                        {% for tag in item.tags.all %}
                        <span class="badge bg-primary">{{ tag.name }}</span>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal für jedes Galerie-Item -->
        <div class="modal fade" id="galleryModal{{ item.id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content border-0 rounded-4 overflow-hidden">
                    <div class="modal-header border-0">
                        <h5 class="modal-title">{{ item.title }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-0">
                        <div class="row g-0">
                            <div class="col-lg-8">
                                <img data-src="{{ item.image.url }}" 
                                     alt="{{ item.title }}" 
                                     class="img-fluid furry-lazy-image"
                                     style="width: 100%; max-height: 80vh; object-fit: contain;">
                            </div>
                            <div class="col-lg-4 p-4">
                                <h4>{{ item.title }}</h4>
                                <p class="text-muted">{{ item.description }}</p>
                                
                                <!-- Tags -->
                                {% if item.tags.all %}
                                <div class="mb-3">
                                    <h6>Tags:</h6>
                                    <div class="d-flex flex-wrap gap-2">
                                        {% for tag in item.tags.all %}
                                        <span class="badge bg-light text-dark">{{ tag.name }}</span>
                                        {% endfor %}
                                    </div>
                                </div>
                                {% endif %}
                                
                                <!-- Metadaten -->
                                <div class="gallery-meta">
                                    <div class="row text-center">
                                        <div class="col-6">
                                            <div class="meta-item">
                                                <i class="fas fa-calendar fa-2x text-primary mb-2"></i>
                                                <div class="meta-value">{{ item.created_at|date:"d.m.Y" }}</div>
                                                <div class="meta-label">Erstellt</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="meta-item">
                                                <i class="fas fa-eye fa-2x text-info mb-2"></i>
                                                <div class="meta-value">{{ item.views|default:0 }}</div>
                                                <div class="meta-label">Aufrufe</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Aktionen -->
                                <div class="mt-4">
                                    <button class="btn btn-primary w-100 mb-2" onclick="shareGalleryItem('{{ item.title }}', '{{ item.description|truncatewords:20 }}')">
                                        <i class="fas fa-share me-2"></i> Teilen
                                    </button>
                                    <button class="btn btn-outline-primary w-100" onclick="downloadImage('{{ item.image.url }}', '{{ item.title }}')">
                                        <i class="fas fa-download me-2"></i> Herunterladen
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="text-center py-5">
                <div class="empty-state">
                    <i class="fas fa-images fa-4x text-muted mb-4"></i>
                    <h3>Keine Bilder gefunden</h3>
                    <p class="text-muted">Versuchen Sie andere Filter oder schauen Sie später wieder vorbei.</p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- Pagination -->
    {% if gallery_items.has_other_pages %}
    <nav aria-label="Gallery pagination" class="mt-5">
        <ul class="pagination justify-content-center">
            {% if gallery_items.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ gallery_items.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                    <i class="fas fa-chevron-left"></i>
                </a>
            </li>
            {% endif %}
            
            {% for num in gallery_items.paginator.page_range %}
                {% if gallery_items.number == num %}
                <li class="page-item active">
                    <span class="page-link">{{ num }}</span>
                </li>
                {% elif num > gallery_items.number|add:'-3' and num < gallery_items.number|add:'3' %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ num }}</a>
                </li>
                {% endif %}
            {% endfor %}
            
            {% if gallery_items.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ gallery_items.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>

<style>
.gallery-item {
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    border-radius: 15px 15px 0 0;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-meta {
    margin-top: 2rem;
}

.meta-item {
    padding: 1rem;
    border-radius: 15px;
    background: var(--light-bg);
    transition: transform 0.3s ease;
}

.meta-item:hover {
    transform: translateY(-2px);
}

.meta-value {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--primary-color);
}

.meta-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.empty-state {
    padding: 3rem;
}

.empty-state i {
    opacity: 0.5;
}

@media (max-width: 768px) {
    .gallery-item img {
        height: 200px !important;
    }
}
</style>

<script>
function shareGalleryItem(title, description) {
    if (navigator.share) {
        navigator.share({
            title: title,
            text: description,
            url: window.location.href
        });
    } else {
        // Fallback: URL kopieren
        navigator.clipboard.writeText(window.location.href);
        showNotification('Link kopiert!', 'info');
    }
}

function downloadImage(imageUrl, title) {
    const link = document.createElement('a');
    link.href = imageUrl;
    link.download = `${title}.jpg`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    showNotification('Download gestartet!', 'success');
}

// Filter-Handling mit AJAX
document.addEventListener('DOMContentLoaded', function() {
    const filterForm = document.querySelector('form');
    const filterSelects = document.querySelectorAll('select');
    
    filterSelects.forEach(select => {
        select.addEventListener('change', function() {
            const formData = new FormData(filterForm);
            const params = new URLSearchParams(formData);
            
            // URL aktualisieren ohne Reload
            const newUrl = `${window.location.pathname}?${params.toString()}`;
            window.history.pushState({}, '', newUrl);
            
            // AJAX Request für neue Ergebnisse
            fetch(`${window.location.pathname}?${params.toString()}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.text())
            .then(html => {
                // Nur den Gallery-Bereich aktualisieren
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const newGallery = doc.querySelector('#gallery');
                const currentGallery = document.querySelector('#gallery');
                
                if (newGallery && currentGallery) {
                    currentGallery.innerHTML = newGallery.innerHTML;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // Fallback: Seite neu laden
                window.location.reload();
            });
        });
    });
});
</script>
{% endblock %}