{% extends "base.html" %}

{% block title %}Dashboard - VideoKonverter{% endblock %}

{% block content %}
<!-- Aktionen -->
<section id="actions-section">
    <div class="action-bar">
        <button class="btn-primary" onclick="openFileBrowser()">Dateien durchsuchen</button>
        <button class="btn-secondary" onclick="openUpload()">Video hochladen</button>
    </div>
</section>

<!-- Aktive Konvertierungen -->
<section id="active-section">
    <h2>Aktive Konvertierungen</h2>
    <div id="active-conversions">
        <!-- Wird dynamisch via WebSocket gefuellt -->
    </div>
</section>

<!-- Warteschlange -->
<section id="queue-section">
    <div style="display:flex; align-items:center; gap:1rem;">
        <h2 style="margin:0">Warteschlange</h2>
        <button id="btn-queue-pause" class="btn-secondary btn-small" onclick="toggleQueuePause()">
            &#9208; Pause
        </button>
        <span id="queue-paused-hint" class="status-badge warn" style="display:none">Pausiert</span>
    </div>
    <div id="queue">
        <!-- Wird dynamisch via WebSocket gefuellt -->
    </div>
</section>

<!-- Filebrowser Modal -->
<div id="filebrowser-overlay" class="modal-overlay" style="display:none" onclick="closeBrowserOnOverlay(event)">
    <div class="modal">
        <div class="modal-header">
            <h2>Dateien durchsuchen</h2>
            <button class="btn-close" onclick="closeFileBrowser()">&times;</button>
        </div>
        <div class="modal-breadcrumb" id="fb-breadcrumb"></div>
        <div class="modal-body" id="fb-content">
            Lade...
        </div>
        <div class="modal-footer">
            <span id="fb-selected-count">0 ausgewaehlt</span>
            <div>
                <button class="btn-secondary" id="fb-select-all" onclick="fbSelectAll()">Alle auswaehlen</button>
                <button class="btn-primary" id="fb-convert" onclick="fbConvertSelected()" disabled>Konvertieren</button>
            </div>
        </div>
    </div>
</div>

<!-- Upload Modal -->
<div id="upload-overlay" class="modal-overlay" style="display:none" onclick="closeUploadOnOverlay(event)">
    <div class="modal modal-small">
        <div class="modal-header">
            <h2>Video hochladen</h2>
            <button class="btn-close" onclick="closeUpload()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="upload-zone" id="upload-zone"
                 ondrop="handleDrop(event)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)">
                <p>Videodateien hierher ziehen</p>
                <p class="upload-hint">oder</p>
                <label class="btn-secondary upload-btn">
                    Dateien waehlen
                    <input type="file" id="upload-input" multiple accept="video/*" onchange="handleFileSelect(event)" style="display:none">
                </label>
            </div>
            <div id="upload-list" class="upload-list"></div>
            <div id="upload-progress" class="upload-progress" style="display:none">
                <div class="progress-container">
                    <div class="progress-bar" id="upload-bar"></div>
                </div>
                <span id="upload-status">Wird hochgeladen...</span>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn-primary" id="upload-start" onclick="startUpload()" disabled>Hochladen & Konvertieren</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    var WS_URL = "{{ ws_url }}";
</script>
<script src="/static/js/websocket.js"></script>
<script src="/static/js/filebrowser.js"></script>
{% endblock %}