<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/breadcrumb.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style_index.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/file-explorer.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <title>Sydoora - Dashboard</title>
    <style>



.nav-items {
    flex-grow: 1; /* Füllt den verfügbaren Platz zwischen Header und Footer aus */
}

.storage-info {
    margin-top: auto; /* Platziert die Storage-Info am unteren Ende */
    padding: 10px;
    border-top: 1px solid var(--border-color); /* Optional: Trennlinie */
    background-color: var(--bg-secondary); /* Hintergrundfarbe für mehr Abgrenzung */
}


.progress-bar {
    height: 100%;
    width: 0;
    background-color: var(--accent-color);
    transition: width 0.3s ease-out;
}

#storageText {
    font-size: 0.8rem;
    margin-top: 0px;
    text-align: center;
}

        /* Preview Modal  */
        #previewModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Abgedunkelter Hintergrund */
    display: none; /* Standardmäßig verstecken */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#previewModal .modal-content {
    position: relative;
    width: 95%; /* Nimmt fast die gesamte Breite des Bildschirms ein */
    height: 95%; /* Nimmt fast die gesamte Höhe des Bildschirms ein */
    max-width: none; /* Hebt Beschränkung auf maximale Breite auf */
    max-height: none; /* Hebt Beschränkung auf maximale Höhe auf */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent; /* Transparent, damit nur das Bild zu sehen ist */
    border: none;
    padding: 0;
}

#previewModal #previewImage {
    width: auto;
    height: auto;
    max-width: 100%; /* Nutzt maximal den Raum des Containers */
    max-height: 100%; /* Nutzt maximal den Raum des Containers */
    object-fit: contain; /* Seitenverhältnis wird erhalten */
    border-radius: 0; /* Keine Rundungen für das Bild */
    display: block;
}







/* Share Modal  */
.large-modal {
    width: 80%;
    max-width: 1000px;
    margin: 5% auto;
}

.modal-header {
    background: var(--accent-color);
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-body {
    padding: 1.5rem;
}

.modal-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
}

/* Einstellungen Spalte */
.settings-section {
    background: var(--bg-primary);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.settings-section h3 {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.input-group input,
.input-group select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Info Spalte */
.info-card {
    background: var(--bg-primary);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.info-list {
    list-style: none;
    padding: 0;
}

.info-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.info-list li i {
    color: var(--accent-color);
}

/* Share Link Bereich */
.link-container {
    display: flex;
    gap: 10px;
}

.link-container input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Buttons */
.modal-footer {
    padding: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--border-color);
}

.primary-btn,
.secondary-btn,
.danger-btn {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.primary-btn {
    background: var(--accent-color);
    color: white;
}

.secondary-btn {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.danger-btn {
    background: #e74c3c;
    color: white;
}

/* Switch Styling */
.switch-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.setting-item {
    margin-bottom: 1rem;
}

.setting-item input[type="number"],
.setting-item input[type="password"] {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}







.user-profile {
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
    }

    .avatar {
        width: 40px;
        height: 40px;
        background-color: #ccc;
        border-radius: 50%;
    }

    .user-menu {
        position: relative;
        cursor: pointer;
    }

    .user-name {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        right: 0;
        background-color: var(--bg-secondary);
        min-width: 120px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        border-radius: 4px;
    }

    .dropdown-content a {
        color: var(--text-primary);
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: var(--bg-primary);
    }

    .user-menu:hover .dropdown-content {
        display: block;
    }


        /* Neue Modal-Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dunkleres Overlay */
    backdrop-filter: blur(5px); /* Hintergrund verschwimmen lassen */
}

.modal-content {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    margin: 10% auto;
    padding: 2rem;
    border: none;
    border-radius: 12px;
    width: 35%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.4s ease-in-out;
}

.modal-content h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--accent-color);
}

.modal-content form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.modal-content input[type="text"], .modal-content input[type="file"] {
    padding: 0.8rem;
    width: 90%;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    font-size: 1rem;
}

.modal-content button {
    padding: 0.8rem 1.5rem;
    background-color: var(--accent-color);
    border: none;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: background 0.2s;
}

.modal-content button:hover {
    background-color: rgba(114, 137, 218, 0.8);
}

/* Animations */
@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Schließen-Button */
.close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
}
/* Fortschrittsanzeige-Styling */
.progress-popup {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    padding: 1rem;
    width: 320px;
    text-align: center;
    color: var(--text-primary);
    animation: fadeIn 0.3s ease-in-out;
}

.progress-popup.visible {
    display: block;
    opacity: 1;
}

.progress-popup.hidden {
    display: none;
    opacity: 0;
}

/* Fortschrittsbalken */
.progress-bar-container {
    background-color: var(--border-color);
    height: 10px;
    width: 100%;
    border-radius: 5px;
    margin-top: 0.5rem;
    position: relative;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0;
    background-color: var(--accent-color);
    border-radius: inherit;
    transition: width 0.3s ease-out;
}

.progress-popup p {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-secondary);
}

/* Fade-In-Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.icon-btn {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.4rem;
    transition: color 0.2s ease-in-out;
}

.icon-btn:hover {
    color: var(--accent-color); /* Farbe beim Hover */
}

.icon-btn.danger:hover {
    color: #e74c3c; /* Rot für Löschaktionen */
}

.breadcrumb a {
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: inherit; /* Nutzt die Standardtextfarbe des aktuellen Elements */
}

.breadcrumb a:hover {
    text-decoration: none; /* Entfernt die Unterstreichung auch beim Hover */
    color: white
}


    </style>

</head>
<body>
    <div class="container">
        <!-- Seitenleiste -->
        <nav class="sidebar">
            <div class="logo">
                <span>Sydoora</span>
            </div>
            <ul class="nav-items">
                <li><i class="fas fa-home"></i> Startseite</li>
                <li class="active"><i class="fas fa-folder"></i> Meine Dateien</li>
            </ul>
            <div class="storage-info">
        <div class="storage-bar">
            <div class="progress-bar" id="storageProgressBar"></div>
        </div>
        <p id="storageText"></p>
            </div>
        </nav>

        <main class="content">
            <header>
                <div class="search-bar">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="Dateien suchen...">
                </div>
                <div class="user-profile">
    <div class="avatar"></div>
    <div class="user-menu">
        <span class="user-name">{{ current_user.username }}</span>
        <div class="dropdown-content">
            <a href="{{ url_for('auth.logout') }}">Ausloggen</a>
        </div>
    </div>
</div>
            </header>

            <!-- Modal neuer Ordner -->
            <div id="createFolderModal" class="modal">
    <div class="modal-content">
        <span class="close" id="closeCreateFolderModal">&times;</span>
        <h2>Neuen Ordner erstellen</h2>
        <form id="createFolderForm" action="/create_folder" method="POST">
    <label for="folderName">Ordnername:</label>
    <input type="text" id="folderName" name="folder_name" required>
    <input type="hidden" name="parent_id" value="{{ current_folder.id if current_folder else '' }}">
    <button type="submit" class="action-btn primary">Erstellen</button>
</form>

    </div>
</div>


            <!-- Dynamische Breadcrumbs -->
            <div class="breadcrumb">
                {% if breadcrumbs %}
                    <a href="{{ url_for('index') }}" class="breadcrumb-item">
                        <i class="fas fa-folder"></i> Meine Dateien
                    </a>
                    {% for folder in breadcrumbs %}
                        <i class="fas fa-chevron-right"></i>
                        <a href="{{ url_for('index', folder_id=folder.id) }}" class="breadcrumb-item">
                            {{ folder.name }}
                        </a>
                    {% endfor %}
                {% else %}
                    <span class="breadcrumb-item">
                        <i class="fas fa-folder"></i> Meine Dateien
                    </span>
                {% endif %}
            </div>

            <div class="actions-bar">
                <div class="left-actions">
                    <button class="action-btn primary" id="openCreateFolderModal">
                        <i class="fas fa-plus"></i> Neuer Ordner
                    </button>
                    <button class="action-btn" id="openUploadModal">
                        <i class="fas fa-upload"></i> Hochladen
                    </button>
                </div>
                <div class="right-actions">
                    <button class="action-btn">
                        <i class="fas fa-th-large"></i>
                    </button>
                    <button class="action-btn">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
            </div>

            <div class="file-explorer">
    <div class="files-table">
    <!-- Dateien und Ordner -->
    <div class="table-header">
        <div class="header-cell">Name</div>
        <div class="header-cell">Geändert</div>
        <div class="header-cell">Größe</div>
        <div class="header-cell">Aktionen</div>
    </div>

    {% for folder in folders %}
    <div class="table-row" onclick="location.href='{{ url_for('index', folder_id=folder.id) }}'" style="cursor: pointer;">
        <div class="cell name-cell">
            <i class="fas fa-folder"></i>
            {{ folder.name }}
        </div>
        <div class="cell">--</div>
        <div class="cell">--</div>
        <div class="cell actions">
            <form action="{{ url_for('delete_folder', folder_id=folder.id) }}" method="post" style="display:inline;">
                <button type="submit" class="icon-btn danger" title="Löschen">
                    <i class="fas fa-trash"></i>
                </button>
            </form>
        </div>
    </div>
    {% endfor %}

{% for file in files %}
<div class="table-row"
    {% if 'image' in file.mime_type %}
        data-file-uuid="{{ file.file_uuid }}" style="cursor: pointer;"
    {% elif 'folder' in file.mime_type %}
        onclick="location.href='{{ url_for('index', folder_id=file.id) }}'" style="cursor: pointer;"
    {% endif %}>
    <div class="cell name-cell">
        <i class="fas {{ 'fa-file-image' if 'image' in file.mime_type else 'fa-file' }}"></i>
        <span>{{ file.filename }}</span>
    </div>
    <div class="cell">
        {{ file.modified_at.strftime("%d.%m.%Y") if file.modified_at else "N/A" }}
    </div>
    <div class="cell">{{ file.size | format_size }}</div>
<div class="cell actions">
    <a href="{{ url_for('download', file_uuid=file.file_uuid) }}" class="icon-btn download-link" title="Herunterladen">
        <i class="fas fa-download"></i>
    </a>
    <button class="icon-btn share-btn" data-file-id="{{ file.id }}" title="Teilen">
        <i class="fas fa-share-alt"></i>
    </button>
    <button class="icon-btn rename-btn" data-file-id="{{ file.id }}" data-current-name="{{ file.filename }}" title="Umbenennen">
        <i class="fas fa-edit"></i>
    </button>
    <form action="{{ url_for('delete_file', file_id=file.id) }}" method="post" style="display:inline;">
        <button type="submit" class="icon-btn danger" title="Löschen">
            <i class="fas fa-trash"></i>
        </button>
    </form>
</div>

</div>
{% endfor %}





</div>

        </main>
    </div>

    <!-- Modal für Datei-Upload -->
    <div id="uploadFileModal" class="modal">
        <div class="modal-content">
            <span class="close" id="closeUploadModal">&times;</span>
            <h2>Datei hochladen</h2>
            <form id="uploadForm" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data">
    <label for="file">Dateien auswählen:</label>
    <input type="file" id="file" name="file" required multiple>
    <input type="hidden" name="folder_id" value="{{ current_folder.id if current_folder else '' }}">
    <button type="submit" class="action-btn primary">Hochladen</button>
</form>

        </div>
    </div>

    <!-- Fortschrittsanzeige -->
    <div id="progressPopup" class="progress-popup hidden">
    <p id="progressText">Fortschritt: 0%</p>
    <div class="progress-bar-container">
        <div id="progressBar" class="progress-bar"></div>
    </div>
</div>

    <!-- Vorschau-Modal -->
<div id="previewModal" class="modal">
    <div class="modal-content">
        <span class="close" id="closePreviewModal">&times;</span>
        <img id="previewImage" src="" alt="Bildvorschau">
    </div>
</div>




<!-- Share Modal -->
<div id="shareModal" class="modal">
    <div class="modal-content large-modal">
        <div class="modal-header">
            <h2><i class="fas fa-share-alt"></i> Datei teilen</h2>
            <span class="close" id="closeShareModal">&times;</span>
        </div>

        <div class="modal-body">
            <div class="modal-grid">
                <!-- Linke Spalte - Einstellungen -->
                <div class="settings-column">
                    <!-- Aktuelle Freigabe Info -->
                    <div id="existingShareInfo" class="info-box" style="display:none;">
                        <h3>Aktuelle Freigabe</h3>
                        <div class="share-details">
                            <p id="shareTokenDisplay"></p>
                            <p id="shareExpirationDisplay"></p>
                            <p id="shareDownloadLimitDisplay"></p>
                            <p id="sharePasswordDisplay"></p>
                        </div>
                        <button id="stopSharingBtn" class="danger-btn">
                            <i class="fas fa-stop-circle"></i> Freigabe beenden
                        </button>
                    </div>

                    <div class="settings-section">
                        <h3>Ablaufzeit</h3>
                        <div class="input-group">
                            <input type="number" id="expirationNumber" min="1" value="24">
                            <select id="expirationType">
                                <option value="hours">Stunden</option>
                                <option value="days">Tage</option>
                                <option value="date">Datum</option>
                            </select>
                        </div>
                        <input type="datetime-local" id="expirationDate" class="date-input" style="display: none;">
                    </div>

                    <div class="settings-section">
                        <h3>Erweiterte Einstellungen</h3>
                        <div class="setting-item">
                            <label class="switch-label">
                                <span><i class="fas fa-download"></i> Download-Limit</span>
                                <label class="switch">
                                    <input type="checkbox" id="enableDownloadLimit">
                                    <span class="slider round"></span>
                                </label>
                            </label>
                            <input type="number" id="maxDownloads" min="1" value="1" disabled>
                        </div>

                        <div class="setting-item">
                            <label class="switch-label">
                                <span><i class="fas fa-lock"></i> Passwortschutz</span>
                                <label class="switch">
                                    <input type="checkbox" id="enablePassword">
                                    <span class="slider round"></span>
                                </label>
                            </label>
                            <input type="password" id="sharePassword" disabled placeholder="Passwort eingeben">
                        </div>
                    </div>
                </div>

                <!-- Rechte Spalte - Info -->
                <div class="info-column">
                    <div class="info-card">
                        <h3><i class="fas fa-info-circle"></i> Hinweise</h3>
                        <ul class="info-list">
                            <li>
                                <i class="fas fa-clock"></i>
                                <span>Zeitliche Begrenzung der Freigabe möglich</span>
                            </li>
                            <li>
                                <i class="fas fa-download"></i>
                                <span>Optionale Begrenzung der Download-Anzahl</span>
                            </li>
                            <li>
                                <i class="fas fa-lock"></i>
                                <span>Zusätzlicher Schutz durch Passwort möglich</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Share Link Bereich -->
                    <div class="share-link-section" style="display: none;">
                        <h3>Share Link</h3>
                        <div class="link-container">
                            <input type="text" id="shareLinkInput" readonly>
                            <button id="copyLinkBtn" class="icon-btn">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="secondary-btn" id="cancelShareBtn">
                <i class="fas fa-times"></i> Abbrechen
            </button>
            <button type="submit" id="generateShareLinkBtn" class="primary-btn">
                <i class="fas fa-share-alt"></i> Link generieren
            </button>
        </div>
    </div>
</div>

<!-- Umbenennen-Modal -->
<div id="renameModal" class="modal">
    <div class="modal-content">
        <span class="close" id="closeRenameModal">&times;</span>
        <h2>Datei umbenennen</h2>
        <form id="renameForm" action="/rename_file" method="POST">
            <label for="newFilename">Neuer Dateiname:</label>
            <input type="text" id="newFilename" name="new_filename" required>
            <input type="hidden" id="renameFileId" name="file_id">
            <button type="submit" class="action-btn primary">Speichern</button>
        </form>
    </div>
</div>




<script>
document.addEventListener('DOMContentLoaded', () => {
    const renameModal = document.getElementById('renameModal');
    const closeRenameModal = document.getElementById('closeRenameModal');
    const renameForm = document.getElementById('renameForm');
    const newFilenameInput = document.getElementById('newFilename');
    const renameFileIdInput = document.getElementById('renameFileId');
    const renameButtons = document.querySelectorAll('.rename-btn');

    // Öffne das Modal bei Klick auf den Umbenennen-Button
    renameButtons.forEach(button => {
        button.addEventListener('click', (e) => {
            e.preventDefault();
            renameModal.style.display = 'block';
            newFilenameInput.value = button.dataset.currentName; // Aktuellen Namen vorschlagen
            renameFileIdInput.value = button.dataset.fileId; // Dateiid setzen
        });
    });

    // Schließen des Modals
    closeRenameModal.onclick = () => renameModal.style.display = 'none';

    // Schließen der Modals bei Klick außerhalb
window.onclick = function (event) {
    if (event.target.classList.contains('modal')) {
        event.target.style.display = "none";
    }
};

    // ESC-Taste schließt das Modal
    window.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') {
            renameModal.style.display = 'none';
        }
    });
});


document.addEventListener('DOMContentLoaded', function() {
    // Überprüfe, ob die Share-Buttons existieren
    const shareButtons = document.querySelectorAll('.share-btn');
    if (shareButtons.length === 0) return; // Frühzeitig beenden, wenn keine Share-Buttons gefunden wurden

    // Modal Elemente
    const shareModal = document.getElementById('shareModal');
    const closeShareModal = document.getElementById('closeShareModal');
    const cancelShareBtn = document.getElementById('cancelShareBtn');
    const shareForm = document.getElementById('shareForm');
    const expirationType = document.getElementById('expirationType');
    const expirationNumber = document.getElementById('expirationNumber');
    const expirationDate = document.getElementById('expirationDate');
    const enableDownloadLimit = document.getElementById('enableDownloadLimit');
    const maxDownloads = document.getElementById('maxDownloads');
    const enablePassword = document.getElementById('enablePassword');
    const sharePassword = document.getElementById('sharePassword');
    const shareLinkInput = document.getElementById('shareLinkInput');
    const copyLinkBtn = document.getElementById('copyLinkBtn');
    const stopSharingBtn = document.getElementById('stopSharingBtn');
    const generateShareLinkBtn = document.getElementById('generateShareLinkBtn');

    // Überprüfe, ob alle notwendigen Elemente existieren
    if (!shareModal || !closeShareModal || !cancelShareBtn || !generateShareLinkBtn) {
        console.error('Erforderliche Modal-Elemente nicht gefunden');
        return;
    }

    let currentFileId = null;

    // Event Listener für Share Buttons
    shareButtons.forEach(btn => {
        btn.addEventListener('click', async (e) => {
            e.preventDefault();
            e.stopPropagation(); // Verhindert Bubble-Up des Click-Events
            currentFileId = btn.dataset.fileId;

            try {
                const response = await fetch(`/check_share_status/${currentFileId}`);
                const shareStatus = await response.json();

                if (shareStatus.is_shared) {
                    showExistingShareSettings(shareStatus);
                } else {
                    resetShareForm();
                }

                shareModal.style.display = 'block';
            } catch (error) {
                console.error('Fehler beim Abrufen des Share-Status:', error);
                alert('Fehler beim Laden der Share-Einstellungen');
            }
        });
    });

    // Expiration Type Change Handler
    if (expirationType) {
        expirationType.addEventListener('change', () => {
            if (expirationNumber) expirationNumber.style.display = expirationType.value !== 'date' ? 'block' : 'none';
            if (expirationDate) expirationDate.style.display = expirationType.value === 'date' ? 'block' : 'none';
        });
    }

    // Download Limit Toggle
    if (enableDownloadLimit && maxDownloads) {
        enableDownloadLimit.addEventListener('change', () => {
            maxDownloads.disabled = !enableDownloadLimit.checked;
        });
    }

    // Password Toggle
    if (enablePassword && sharePassword) {
        enablePassword.addEventListener('change', () => {
            sharePassword.disabled = !enablePassword.checked;
        });
    }

    // Generate Share Link
    if (generateShareLinkBtn) {
        generateShareLinkBtn.addEventListener('click', async () => {
            if (!currentFileId) return;

            const shareData = {
                expiration: {
                    unit: expirationType ? expirationType.value : 'hours',
                    value: expirationNumber ? expirationNumber.value : '24',
                    date: expirationDate ? expirationDate.value : null
                },
                max_downloads: enableDownloadLimit && enableDownloadLimit.checked ? maxDownloads.value : null,
                password: enablePassword && enablePassword.checked ? sharePassword.value : null
            };

            try {
                const response = await fetch(`/share/${currentFileId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(shareData)
                });

                const result = await response.json();

                if (result.share_link) {
                    if (shareLinkInput) {
                        shareLinkInput.value = result.share_link;
                        document.querySelector('.share-link-section').style.display = 'flex';
                    }
                    if (stopSharingBtn) stopSharingBtn.style.display = 'block';
                }
            } catch (error) {
                console.error('Error:', error);
                alert('Fehler beim Erstellen des Share-Links');
            }
        });
    }

    // Copy Link Button
    if (copyLinkBtn && shareLinkInput) {
        copyLinkBtn.addEventListener('click', () => {
            shareLinkInput.select();
            document.execCommand('copy');
            alert('Link in Zwischenablage kopiert!');
        });
    }

    // Stop Sharing Button
    if (stopSharingBtn) {
        stopSharingBtn.addEventListener('click', async () => {
            if (!currentFileId) return;

            try {
                const response = await fetch(`/unshare/${currentFileId}`, {
                    method: 'POST'
                });

                if (response.ok) {
                    shareModal.style.display = 'none';
                    location.reload();
                }
            } catch (error) {
                console.error('Error:', error);
                alert('Fehler beim Beenden der Freigabe');
            }
        });
    }

    // Modal schließen
    if (closeShareModal) {
        closeShareModal.onclick = () => shareModal.style.display = 'none';
    }
    if (cancelShareBtn) {
        cancelShareBtn.onclick = () => shareModal.style.display = 'none';
    }

    // Klick außerhalb des Modals
    window.onclick = (event) => {
        if (event.target === shareModal) {
            shareModal.style.display = 'none';
        }
    };

    function showExistingShareSettings(settings) {
        const existingShareInfo = document.getElementById('existingShareInfo');
        if (!existingShareInfo) return;

        existingShareInfo.style.display = 'block';

        if (shareLinkInput) {
            shareLinkInput.value = settings.share_link;
            document.querySelector('.share-link-section').style.display = 'flex';
        }

        if (stopSharingBtn) stopSharingBtn.style.display = 'block';

        // Weitere Einstellungen anzeigen
        const shareTokenDisplay = document.getElementById('shareTokenDisplay');
        const shareExpirationDisplay = document.getElementById('shareExpirationDisplay');
        const shareDownloadLimitDisplay = document.getElementById('shareDownloadLimitDisplay');
        const sharePasswordDisplay = document.getElementById('sharePasswordDisplay');

        if (shareTokenDisplay) shareTokenDisplay.textContent = `Link: ${settings.share_link}`;
        if (shareExpirationDisplay && settings.expires_at) shareExpirationDisplay.textContent = `Läuft ab am: ${settings.expires_at}`;
        if (shareDownloadLimitDisplay && settings.max_downloads) shareDownloadLimitDisplay.textContent = `Download-Limit: ${settings.max_downloads}`;
        if (sharePasswordDisplay) sharePasswordDisplay.textContent = `Passwortgeschützt: ${settings.has_password ? 'Ja' : 'Nein'}`;
    }

    function resetShareForm() {
        const existingShareInfo = document.getElementById('existingShareInfo');
        if (existingShareInfo) existingShareInfo.style.display = 'none';

        if (shareForm) shareForm.reset();

        const shareLinkSection = document.querySelector('.share-link-section');
        if (shareLinkSection) shareLinkSection.style.display = 'none';

        if (stopSharingBtn) stopSharingBtn.style.display = 'none';
        if (maxDownloads) maxDownloads.disabled = true;
        if (sharePassword) sharePassword.disabled = true;
    }
});






    // Modal-Logik für Upload
    const uploadModal = document.getElementById("uploadFileModal");
    const uploadOpenBtn = document.getElementById("openUploadModal");
    const uploadCloseBtn = document.getElementById("closeUploadModal");

    uploadOpenBtn.onclick = function () {
        uploadModal.style.display = "block";
    };

    uploadCloseBtn.onclick = function () {
        uploadModal.style.display = "none";
    };

    // Modal-Logik für "Neuer Ordner"
    const createFolderButton = document.getElementById("openCreateFolderModal");
    const createFolderModal = document.getElementById("createFolderModal");
    const closeCreateFolderModalButton = document.getElementById("closeCreateFolderModal");
    const createFolderForm = document.getElementById("createFolderForm");

    // Öffnen des "Neuer Ordner"-Modals
    createFolderButton.onclick = function () {
        createFolderModal.style.display = "block";
    };

    // Schließen des Modals
    closeCreateFolderModalButton.onclick = function () {
        createFolderModal.style.display = "none";
    };

    // Schließen des Modals bei Klick außerhalb eines Modals
    window.onclick = function (event) {
        if (event.target === createFolderModal) {
            createFolderModal.style.display = "none";
        }
        if (event.target === uploadModal) {
            uploadModal.style.display = "none";
        }
    };

    // Funktion zum Schließen aller Modals
function closeAllModals() {
    const modals = document.querySelectorAll('.modal');
    modals.forEach(modal => {
        modal.style.display = "none";
    });
}

// Schließen der Modale mit der ESC-Taste oder durch Klicken außerhalb
document.addEventListener("keydown", function (event) {
    if (event.key === "Escape") {
        closeAllModals();
    }
});

// Schließen der Modale durch Klicken außerhalb
window.addEventListener('click', function(event) {
    if (event.target.classList.contains('modal')) {
        event.target.style.display = "none";
    }
});

    // Neuer Ordner
    createFolderForm.addEventListener("submit", function (e) {
        e.preventDefault(); // Standardaktion verhindern
        const formData = new FormData(createFolderForm);

        fetch(createFolderForm.action, {
            method: "POST",
            body: formData
        })
        .then((response) => {
            if (response.ok) {
                createFolderModal.style.display = "none";
                location.reload(); // Seite neu laden, um den neuen Ordner anzuzeigen
            } else {
                alert("Fehler beim Erstellen des Ordners.");
            }
        })
        .catch((error) => {
            console.error("Fehler:", error);
            alert("Ein Fehler ist aufgetreten.");
        });
    });

    // Fortschrittsanzeige für Upload und Download
    const uploadForm = document.getElementById("uploadForm");
    const progressPopup = document.getElementById("progressPopup");
    const progressBar = document.getElementById("progressBar");
    const progressText = document.getElementById("progressText");

    // Fortschrittsanzeige einblenden
    function showProgressPopup(type) {
        progressPopup.classList.remove("hidden");
        progressPopup.classList.add("visible");
        progressBar.style.width = "0%";
        progressText.textContent = `${type}: 0%`;
    }

    // Fortschrittsanzeige aktualisieren
    function updateProgress(value) {
        progressBar.style.width = `${value}%`;
        progressText.textContent = `Fortschritt: ${value.toFixed(2)}%`;
    }

    // Fortschrittsanzeige ausblenden
    function hideProgressPopup() {
        setTimeout(() => {
            progressPopup.classList.remove("visible");
            progressPopup.classList.add("hidden");
        }, 1000); // Nach 1 Sekunde deaktivieren
    }

    // Upload-Fortschritt mit automatischem Schließen des Upload-Modals
    uploadForm.addEventListener("submit", function (e) {
        e.preventDefault(); // Standard-Seitenaktualisierung verhindern
        const formData = new FormData(uploadForm);
        const xhr = new XMLHttpRequest();
        xhr.open("POST", uploadForm.action, true);

        // Fortschrittsanzeige starten
        showProgressPopup("Upload");

        // Fortschritt überwachen
        xhr.upload.onprogress = function (event) {
            if (event.lengthComputable) {
                const percentComplete = (event.loaded / event.total) * 100; // Fortschritt berechnen
                updateProgress(percentComplete); // Fortschrittsanzeige aktualisieren
            }
        };

        // Modal für Upload sofort schließen, sobald Fortschritt startet
        uploadModal.style.display = "none";

        // Upload abgeschlossen
        xhr.onload = function () {
            if (xhr.status === 200) {
                updateProgress(100); // Fortschrittsanzeige auf 100% setzen
                hideProgressPopup(); // Fortschrittsanzeige nach Abschluss ausblenden
                location.reload(); // Seite neu laden
            } else {
                alert("Fehler beim Upload.");
                hideProgressPopup();
            }
        };

        // Fehler beim Upload
        xhr.onerror = function () {
            alert("Netzwerkfehler während des Uploads.");
            hideProgressPopup();
        };

        // Upload starten
        xhr.send(formData);
    });

    // Fortschrittsanzeige für Downloads
    document.querySelectorAll(".download-link").forEach(link => {
        link.addEventListener("click", () => {
            showProgressPopup("Download"); // Fortschrittsanzeige starten

            function updateDownloadProgress() {
                fetch("/progress") // Fortschritt vom Server abrufen
                    .then(response => response.json())
                    .then(progress => {
                        const value = progress.download || 0;
                        updateProgress(value);

                        if (value < 100) {
                            // Weitere Fortschritte abrufen
                            setTimeout(updateDownloadProgress, 500);
                        } else {
                            progressText.textContent = "Download abgeschlossen!";
                            hideProgressPopup(); // Fortschrittsanzeige ausblenden
                        }
                    })
                    .catch(() => {
                        progressText.textContent = "Fehler beim Download.";
                        hideProgressPopup(); // Ausblenden bei Fehler
                    });
            }

            // Fortschritt starten
            setTimeout(updateDownloadProgress, 500);
        });
    });

 // BILDVORSCHAU
document.addEventListener('DOMContentLoaded', () => {
    // Elemente für das Vorschau-Modal
    const previewModal = document.getElementById('previewModal');
    const previewImage = document.getElementById('previewImage');
    const closePreviewModal = document.getElementById('closePreviewModal');

    // Event-Listener für alle Zeilen in der Tabelle
    document.querySelectorAll('.table-row[data-file-uuid]').forEach(row => {
        row.addEventListener('click', (event) => {
            // Prüfen, ob das Ziel ein Button oder Link ist (keine Modal-Öffnung)
            if (
                event.target.tagName === 'BUTTON' ||
                event.target.tagName === 'A' ||
                event.target.closest('button') ||
                event.target.closest('a')
            ) {
                return; // Event abbrechen, wenn auf einen Button oder Link geklickt wurde
            }

            event.preventDefault(); // Standardaktion verhindern
            const fileUuid = row.getAttribute('data-file-uuid'); // UUID des Bildes

            if (fileUuid) {
                previewImage.src = `/download-preview/${fileUuid}`; // Bild laden
                previewModal.style.display = 'flex'; // Modal sichtbar machen
            }
        });
    });

    // Modal schließen, wenn "X" geklickt wird
    closePreviewModal.addEventListener('click', () => {
        closeModal();
    });

    // Modal schließen, wenn außerhalb des Modals geklickt wird
    window.addEventListener('click', (event) => {
        if (event.target === previewModal) {
            closeModal();
        }
    });

    // Modal mit ESC-Taste schließen
    window.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') {
            closeModal();
        }
    });

    // Funktion, um das Modal zu schließen
    function closeModal() {
        previewModal.style.display = 'none';
        previewImage.src = ''; // Bildquelle zurücksetzen
    }
});



function updateStorageBar() {
    fetch('/get_storage_info')
        .then(response => response.json())
        .then(data => {
            const progressBar = document.getElementById('storageProgressBar');
            const storageText = document.getElementById('storageText');

            progressBar.style.width = `${data.percentage}%`;

            const usedGB = (data.used / (1024 * 1024 * 1024)).toFixed(2);
            const maxGB = (data.max / (1024 * 1024 * 1024)).toFixed(2);

            storageText.textContent = `${usedGB} GB / ${maxGB} GB (${data.percentage}%)`;
        })
        .catch(error => console.error('Error fetching storage info:', error));
}

// Update storage bar when page loads
document.addEventListener('DOMContentLoaded', updateStorageBar);

// Update storage bar every 60 seconds
setInterval(updateStorageBar, 60000);



    document.addEventListener('DOMContentLoaded', function() {
        const userMenu = document.querySelector('.user-menu');
        const dropdownContent = document.querySelector('.dropdown-content');

        userMenu.addEventListener('click', function(e) {
            e.stopPropagation();
            dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
        });

        document.addEventListener('click', function() {
            dropdownContent.style.display = 'none';
        });
    });



</script>




</body>
</html>
