{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block extra_css %}
<style>
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 1000;
        cursor: zoom-out;
    }

    .modal-content {
        max-width: 90%;
        max-height: 90vh;
        margin: auto;
        display: block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        object-fit: contain;
    }

    .zoom-in {
        cursor: zoom-in;
    }

    .filename {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
{% endblock %}

{% block content %}
<!-- Image Modal -->
<div id="imageModal" class="modal" onclick="closeModal()">
    <img id="modalImage" class="modal-content" src="" alt="Zoomed screenshot">
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-900">{% trans "Screenshots" %}</h1>
        <span class="text-gray-500">{{ screenshots|length }} {% trans "images" %}</span>
    </div>

    {% if screenshots %}
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4">
            {% for screenshot in screenshots %}
                <div class="relative group bg-white p-3 rounded-lg shadow-sm">
                    <!-- Image Container -->
                    <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-gray-100">
                        <img src="{{ screenshot.url }}"
                             alt="Screenshot"
                             class="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105 zoom-in"
                             loading="lazy"
                             onclick="openModal(this.src)">
                    </div>
                    <!-- Filename -->
                    <div class="mt-3">
                        <div class="text-sm text-gray-600 filename" title="{{ screenshot.display_name }}">
                            <a href="{% url 'page-detail' screenshot.id %}"
                               class="text-medium font-medium text-blue-600 hover:text-blue-600"
                               title="{{ screenshot.id }}">
                                {{ screenshot.display_name }}
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center text-gray-500 py-12">
            {% trans "No screenshots available yet." %}
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
const modal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImage');

function openModal(imgSrc) {
    modal.style.display = "block";
    modalImg.src = imgSrc;
    document.body.style.overflow = 'hidden';
}

function closeModal() {
    modal.style.display = "none";
    document.body.style.overflow = 'auto';
}

document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeModal();
    }
});

modalImg.onclick = function(event) {
    event.stopPropagation();
};

modalImg.onload = function() {
    this.style.opacity = '1';
};

modalImg.style.opacity = '0';
modalImg.style.transition = 'opacity 0.3s ease-in-out';
</script>
{% endblock %}