{% extends "base.html" %}
{% block title %}{{ gallery.label }} — File Admin{% endblock %}

{% block extra_css %}
<style>
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.file-tile {
    border: 1px solid #006600;
    background: #000;
    position: relative;
    overflow: hidden;
}
.file-tile img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    display: block;
}
.file-tile .file-name {
    color: #00cc00; font-size: .7rem;
    padding: 2px 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-tile .delete-btn {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,0.8); border: 1px solid #ff0000;
    color: #ff0000; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .75rem;
}
.file-tile .delete-btn:hover { background: #ff0000; color: #000; }
.dropzone {
    border: 2px dashed #00ff00; background: #001100;
    padding: 16px; text-align: center;
    margin-bottom: 12px; border-radius: 4px;
}
.dropzone.drag { background: #003300; }
</style>
{% endblock %}

{% block content %}
<div class="bbs-header">
    <h1><i class="bi bi-folder2-open"></i> {{ gallery.label }}
        <span class="text-muted small">({{ total_images }} files)</span>
    </h1>
    <p>{{ gallery.description }}</p>
</div>

<div class="d-flex justify-content-between mb-3">
    <a href="{{ url_for('gallery_admin.index') }}" class="btn btn-primary btn-sm">
        <i class="bi bi-arrow-left"></i> Galleries
    </a>
    <a href="{{ url_for('gallery.browse', slug=gallery.slug) }}" class="btn btn-primary btn-sm">
        <i class="bi bi-eye"></i> View Public Page
    </a>
</div>

<div class="card mb-3">
<div class="card-body">
<form method="post" action="{{ url_for('gallery_admin.upload', slug=gallery.slug) }}"
      enctype="multipart/form-data" id="upload-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <label class="form-label">Upload images
        <span class="text-muted small">(jpg, jpeg, gif, png, bmp, webp — multiple allowed)</span>
    </label>
    <div class="dropzone" id="dropzone">
        <i class="bi bi-cloud-arrow-up" style="font-size:2rem;"></i><br>
        <input type="file" name="files" id="files-input" multiple
               accept="image/jpeg,image/gif,image/png,image/bmp,image/webp"
               class="form-control mt-2" style="max-width:600px;margin:auto;">
    </div>
    <button type="submit" class="btn btn-primary">
        <i class="bi bi-upload"></i> Upload
    </button>
</form>
</div>
</div>

<div class="card">
<div class="card-body">
{% if total_images == 0 %}
    <p class="text-center text-muted">No files in this gallery yet. Upload some above.</p>
{% else %}
<div class="file-grid">
    {% for img in images %}
    <div class="file-tile">
        <img loading="lazy"
             src="{{ url_for('gallery.image', slug=gallery.slug, filename=img) }}"
             alt="{{ img }}">
        <form method="post"
              action="{{ url_for('gallery_admin.delete_file', slug=gallery.slug, filename=img, page=page) }}"
              class="d-inline"
              onsubmit="return confirm('Delete {{ img|e }} permanently? This cannot be undone.');">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="delete-btn" title="Delete">
                <i class="bi bi-x"></i>
            </button>
        </form>
        <div class="file-name" title="{{ img }}">{{ img }}</div>
    </div>
    {% endfor %}
</div>

{% if total_pages > 1 %}
<nav class="mt-3">
    <ul class="pagination justify-content-center flex-wrap">
        {% if page > 1 %}<li class="page-item"><a class="page-link" href="?page={{ page - 1 }}">«</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 }}">»</a></li>{% endif %}
    </ul>
</nav>
{% endif %}
{% endif %}
</div>
</div>

<script>
(function () {
    var dz = document.getElementById('dropzone');
    var input = document.getElementById('files-input');
    ['dragenter','dragover'].forEach(function (e) {
        dz.addEventListener(e, function (ev) { ev.preventDefault(); dz.classList.add('drag'); });
    });
    ['dragleave','drop'].forEach(function (e) {
        dz.addEventListener(e, function (ev) { ev.preventDefault(); dz.classList.remove('drag'); });
    });
    dz.addEventListener('drop', function (ev) {
        if (ev.dataTransfer && ev.dataTransfer.files) {
            input.files = ev.dataTransfer.files;
        }
    });
})();
</script>
{% endblock %}