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

{% block content %}
<!-- Datei Upload Section -->
<section id="upload-section" class="mb-5 p-4 p-lg-5 border-0 rounded-4 bg-white shadow-sm upload-area">
    <h2 class="mb-4 fw-semibold text-primary-emphasis">Datei hochladen</h2>
    <form id="upload-form" enctype="multipart/form-data">
        <div class="row g-3 mb-4">
            <div class="col-md-8">
                 <label for="file-input" class="form-label">Datei auswählen oder hierher ziehen:</label>
                 <input type="file" id="file-input" name="file" class="form-control form-control-lg" required multiple>
            </div>
            <div class="col-md-4">
                <label for="password-upload" class="form-label">Aktionspasswort:</label>
                <input type="password" id="password-upload" name="password" class="form-control form-control-lg" required placeholder="Passwort">
            </div>
        </div>
        <div id="drop-zone" class="border rounded-3 p-5 text-center bg-light mb-4 drop-zone-style" style="border-style: dashed !important;">
             <p class="text-muted fs-5"><i class="bi bi-cloud-arrow-up display-4 d-block mb-2"></i>Dateien hierher ziehen...</p>
        </div>
        <button type="submit" class="btn btn-primary btn-lg px-4"><i class="bi bi-upload"></i> Hochladen</button>
        <div id="upload-status" class="mt-3 form-text"></div>
    </form>
</section>

<!-- Uploaded Files Section -->
<section id="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">Hochgeladene Dateien <small class="text-muted fs-6 fw-normal">(Neueste zuerst)</small></h2>
        <div>
            <button id="refresh-button" 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="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 }}"> {# Data-filename für JS #}
                <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 file-actions">
                             {# Preview-Button mit file-preview-link Klasse und data-filename Attribut #}
                             <button class="btn btn-sm btn-outline-primary file-preview-link" 
                                     data-filename="{{ file.name }}" title="Vorschau">
                                <i class="bi bi-eye"></i> <span class="button-text d-none d-lg-inline">Vorschau</span>
                             </button>
                             <button class="btn btn-sm btn-outline-secondary 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" 
                               title="Download">
                                <i class="bi bi-download"></i> <span class="button-text d-none d-lg-inline">Downl.</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %} {% else %}
            <div class="col-12"><div class="alert alert-light text-center mt-4">Noch keine Dateien hochgeladen.</div></div>
        {% endif %}
    </div>
</section>
{% endblock %}