{% extends "shop/base.html" %}
{% load i18n %}

{% block title %}{{ gallery.name }} - {% trans "Gallery" %} - Fursuit Shop{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox@3.2.0/dist/css/glightbox.min.css">
<style>
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.5rem;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.like-button {
    transition: transform 0.2s ease;
}

.like-button:hover {
    transform: scale(1.1);
}

.like-button.liked {
    color: #dc3545;
}

.specs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.specs-list .card {
    height: 100%;
}
</style>
{% endblock %}

{% block content %}
<div class="content-container">
    <div class="row">
        <div class="col-lg-8">
            <!-- Hauptbild -->
            {% if gallery.images.first %}
                <div class="position-relative mb-4">
                    <a href="{{ gallery.images.first.image.url }}" class="glightbox" 
                       data-gallery="gallery-{{ gallery.id }}">
                        <img data-src="{{ gallery.images.first.image.url }}" 
                             alt="{{ gallery.name }}"
                             class="img-fluid rounded-3 furry-lazy-image shadow-sm"
                             style="width: 100%; max-height: 600px; object-fit: contain;">
                    </a>
                </div>
            {% endif %}

            <!-- Galerie-Grid -->
            {% if gallery.images.all|length > 1 %}
                <div class="gallery-grid">
                    {% for image in gallery.images.all %}
                        {% if not forloop.first %}
                            <a href="{{ image.image.url }}" 
                               class="gallery-item glightbox" 
                               data-gallery="gallery-{{ gallery.id }}">
                                <img data-src="{{ image.image.url }}" 
                                     alt="{{ gallery.name }} - {% trans 'Image' %} {{ forloop.counter }}"
                                     class="furry-lazy-image">
                            </a>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="col-lg-4">
            <div class="furry-card mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <h1 class="card-title h2">{{ gallery.name }}</h1>
                        <button class="btn btn-outline-danger like-button {% if user_has_liked %}liked{% endif %}"
                                data-gallery-id="{{ gallery.id }}"
                                onclick="toggleLike(this)">
                            <i class="bi bi-heart-fill"></i>
                            <span class="likes-count">{{ gallery.likes }}</span>
                        </button>
                    </div>

                    <div class="mb-3">
                        {% if gallery.fursuit_type == 'fullsuit' %}
                            <span class="badge bg-primary">{% trans "Fullsuit" %}</span>
                        {% elif gallery.fursuit_type == 'partial' %}
                            <span class="badge bg-info">{% trans "Partial Suit" %}</span>
                        {% else %}
                            <span class="badge bg-secondary">{% trans "Head Only" %}</span>
                        {% endif %}
                        
                        {% if gallery.style == 'toony' %}
                            <span class="badge bg-success">{% trans "Toony" %}</span>
                        {% elif gallery.style == 'realistic' %}
                            <span class="badge bg-warning">{% trans "Realistic" %}</span>
                        {% else %}
                            <span class="badge bg-info">{% trans "Semi-Realistic" %}</span>
                        {% endif %}
                    </div>

                    <p class="card-text">{{ gallery.description }}</p>

                    <hr>

                    <div class="specs-list">
                        {% if gallery.features %}
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-subtitle mb-2">{% trans "Features" %}</h6>
                                    <ul class="list-unstyled mb-0">
                                        {% for feature in gallery.features %}
                                            <li><i class="bi bi-check-circle text-success"></i> {{ feature }}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        {% endif %}

                        {% if gallery.materials %}
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-subtitle mb-2">{% trans "Materials" %}</h6>
                                    <ul class="list-unstyled mb-0">
                                        {% for material in gallery.materials %}
                                            <li><i class="bi bi-circle-fill text-primary"></i> {{ material }}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                    </div>

                    <hr>

                    <div class="d-grid gap-2">
                        <a href="{% url 'shop:fursuit_order' %}?inspiration={{ gallery.id }}" 
                           class="btn btn-primary">
                            <i class="bi bi-cart"></i> 
                            {% trans "Order Similar Fursuit" %}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

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

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.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.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

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

.like-button {
    border-radius: 25px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.like-button:hover {
    transform: scale(1.1);
}

.like-button.liked {
    background-color: var(--danger-color);
    color: white;
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.5rem;
    }
    
    .gallery-item img {
        height: 150px;
    }
}
</style>

<script>
function toggleLike(button) {
    const galleryId = button.dataset.galleryId;
    const likesCount = button.querySelector('.likes-count');
    
    fetch(`/gallery/${galleryId}/like/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            button.classList.toggle('liked');
            likesCount.textContent = data.likes;
            
            // Animation
            button.style.transform = 'scale(1.2)';
            setTimeout(() => {
                button.style.transform = 'scale(1)';
            }, 200);
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
</script>
{% endblock %}