{% extends "base.html" %}
{% block title %}Verwaltung - {{ page_title }}{% endblock %}

{% block content %}
<h1 class="mb-4 display-5 fw-bold site-title">Dateiverwaltung</h1>

<section id="admin-files-section">
     <div class="d-flex justify-content-between align-items-center mb-4 pb-2 border-bottom border-light-subtle">
        <h2 class="fw-semibold text-primary-emphasis mb-0">Alle Dateien <small class="text-muted fs-6 fw-normal">(Neueste zuerst)</small></h2>
         <div>
            <button id="refresh-button-admin" class="btn btn-sm btn-outline-secondary me-2" title="Aktualisieren"><i class="bi bi-arrow-clockwise"></i></button>
            <div class="btn-group btn-group-sm" role="group">
                <button type="button" class="btn btn-outline-secondary view-toggle active" data-view="grid" title="Grid"><i class="bi bi-grid-fill"></i></button>
                <button type="button" class="btn btn-outline-secondary view-toggle" data-view="list" title="List"><i class="bi bi-list-ul"></i></button>
            </div>
        </div>
    </div>

    <div id="admin-file-list" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 grid-view">
        {% if files %} {% for file in files %}
            <div class="col file-item" data-filename="{{ file.name }}">
                 <div class="card h-100 shadow-sm border-light file-card">
                     {# Thumbnail-Link mit file-preview-link Klasse und data-filename Attribut #}
                    <a href="#" class="text-center p-2 file-thumbnail-link file-preview-link"
                       data-filename="{{ file.name }}">
                        <img src="{{ file.thumbnail_url }}" class="card-img-top file-thumbnail" alt="Vorschau">
                    </a>
                    <div class="card-body d-flex flex-column p-3">
                        <h6 class="card-title file-name text-truncate fw-medium" title="{{ file.name }}">{{ file.name }}</h6>
                        <p class="card-text file-size mb-3"><small class="text-muted">{{ file.size }}</small></p>
                        <div class="mt-auto d-flex justify-content-between flex-wrap file-actions">
                            {# Preview-Button mit file-preview-link Klasse und data-filename Attribut #}
                             <button class="btn btn-sm btn-outline-primary m-1 file-preview-link" 
                                     data-filename="{{ file.name }}" title="Anzeigen">
                                <i class="bi bi-eye"></i> <span class="button-text d-none d-lg-inline">Anzeigen</span>
                            </button>
                            <button class="btn btn-sm btn-outline-secondary m-1 copy-link-btn" 
                                    data-link="{{ url_for('file_preview', filename=file.name, _external=True) }}" 
                                    title="Link kopieren">
                                <i class="bi bi-link-45deg"></i> <span class="button-text d-none d-lg-inline">Link</span>
                            </button>                            
                            <a href="{{ file.url }}" download="{{ file.name }}" class="btn btn-sm btn-outline-success m-1" 
                               title="Download">
                                <i class="bi bi-download"></i> <span class="button-text d-none d-lg-inline">Downl.</span>
                            </a>
                            <button class="btn btn-sm btn-outline-danger m-1 delete-file-btn" 
                                    data-filename="{{ file.name }}" title="Löschen">
                                <i class="bi bi-trash"></i> <span class="button-text d-none d-lg-inline">Löschen</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %} {% else %}
            <div class="col-12"><div class="alert alert-light text-center mt-4">Keine Dateien gefunden.</div></div>
        {% endif %}
    </div>
</section>
{% endblock %}