{% extends "base.html" %}
{% block title %}{{ label }} — {{ config.BBS_NAME }}{% endblock %}

{% block extra_css %}
<style>
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.gallery-grid a {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid #006600;
    background: #000;
    text-decoration: none;
}
.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
}
.gallery-grid a:hover img { transform: scale(1.05); }
.gallery-grid .caption {
    display: block;
    color: #00cc00;
    font-size: .75rem;
    padding: 2px 4px;
    background: rgba(0,0,0,0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#image-modal {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    align-items: center; justify-content: center;
    cursor: pointer;
}
#image-modal img {
    max-width: 96vw; max-height: 92vh;
    border: 2px solid #00ff00;
    box-shadow: 0 0 24px rgba(0,255,0,0.4);
}
#image-modal .modal-caption {
    position: absolute;
    bottom: 12px; left: 12px; right: 12px;
    text-align: center;
    color: #00ff00;
    font-size: .9rem;
}
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2><i class="bi bi-images"></i> {{ label }}
        <span class="text-muted small">({{ total_images }} images)</span>
    </h2>
    <a href="{{ url_for('gallery.index') }}" class="btn btn-primary btn-sm">
        <i class="bi bi-arrow-left"></i> Galleries
    </a>
</div>

<div class="gallery-grid">
    {% for img in images %}
    <a href="#" class="gallery-tile" data-img="{{ url_for('gallery.image', slug=slug, filename=img) }}"
                                     data-name="{{ img }}">
        <img loading="lazy"
             src="{{ url_for('gallery.image', slug=slug, filename=img) }}"
             alt="{{ img }}">
    </a>
    {% endfor %}
</div>

{% if total_pages > 1 %}
<nav class="mt-4">
    <ul class="pagination justify-content-center flex-wrap">
        {% if page > 1 %}
        <li class="page-item"><a class="page-link" href="?page={{ page - 1 }}">« Prev</a></li>
        {% endif %}
        {% for p in range(1, total_pages + 1) %}
            {% if p == page %}
                <li class="page-item active"><span class="page-link">{{ p }}</span></li>
            {% elif p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
                <li class="page-item"><a class="page-link" href="?page={{ p }}">{{ p }}</a></li>
            {% elif p == page - 3 or p == page + 3 %}
                <li class="page-item disabled"><span class="page-link">…</span></li>
            {% endif %}
        {% endfor %}
        {% if page < total_pages %}
        <li class="page-item"><a class="page-link" href="?page={{ page + 1 }}">Next »</a></li>
        {% endif %}
    </ul>
</nav>
{% endif %}

<div id="image-modal">
    <img id="modal-img" alt="">
    <div class="modal-caption" id="modal-cap"></div>
</div>

<script>
(function () {
    var modal = document.getElementById('image-modal');
    var modalImg = document.getElementById('modal-img');
    var modalCap = document.getElementById('modal-cap');
    document.querySelectorAll('.gallery-tile').forEach(function (a) {
        a.addEventListener('click', function (e) {
            e.preventDefault();
            modalImg.src = a.dataset.img;
            modalCap.textContent = a.dataset.name;
            modal.style.display = 'flex';
        });
    });
    modal.addEventListener('click', function () {
        modal.style.display = 'none';
        modalImg.src = '';
    });
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            modal.style.display = 'none';
            modalImg.src = '';
        }
    });
})();
</script>
{% endblock %}