{% extends "base.html" %}
{% import "macros/workspace_ui.html" as ui %}

{% block extra_head %}
<!-- External Stylesheet for Video Viewer -->
<link rel="stylesheet" href="/plugins/video_viewer/assets/css/video_viewer_view.css">
{% endblock %}

{% block content %}
<main id="player-container" class="video-player-container text-foreground" data-overlay-stack="none">
    {{ ui::notice() }}
    <div id="video-overlay" class="video-overlay">
        <div class="loader-spinner"></div>
    </div>

    <div id="videos-wrapper" class="videos-wrapper">
        <!-- Videos will be injected here -->
    </div>

    <!-- Progress Bar -->
    <div class="progress-bar-container">
        <span class="time-display" id="current-time">0:00</span>
        <div class="progress-bar-wrapper" id="progress-wrapper">
            <div id="progress-bar-track" class="progress-bar-track">
                <div id="progress-filled" class="progress-filled"></div>
            </div>
        </div>
        <span class="time-display" id="duration-display">0:00</span>
    </div>

    <!-- Controls -->
    <div class="player-controls">
        <button id="prev-btn" class="control-btn" type="button" title="Previous video" aria-label="Previous video"><i class="fas fa-step-backward" aria-hidden="true"></i></button>
        <button id="rewind-btn" class="control-btn" type="button" title="Rewind 10 seconds" aria-label="Rewind 10 seconds"><i class="fas fa-undo" aria-hidden="true"></i></button>
        <button id="play-pause-btn" class="control-btn" type="button" title="Play or pause" aria-label="Play or pause"><i class="fas fa-pause" aria-hidden="true"></i></button>
        <button id="fast-forward-btn" class="control-btn" type="button" title="Forward 10 seconds" aria-label="Forward 10 seconds"><i class="fas fa-redo" aria-hidden="true"></i></button>
        <button id="next-btn" class="control-btn" type="button" title="Next video" aria-label="Next video"><i class="fas fa-step-forward" aria-hidden="true"></i></button>
        <button id="mute-btn" class="control-btn" type="button" title="Mute or unmute" aria-label="Mute or unmute"><i class="fas fa-volume-up" aria-hidden="true"></i></button>
        <button id="fullscreen-btn" class="control-btn" type="button" title="Toggle fullscreen" aria-label="Toggle fullscreen"><i class="fas fa-expand" aria-hidden="true"></i></button>
    </div>

    <div class="player-info">
        <h2 id="video-title">Loading...</h2>
        <span id="video-count">0 / 0</span>
    </div>

    <!-- Password Modal for shared galleries -->
    <div id="password-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="password-modal-title">
        <div class="modal-content card">
            <h3 id="password-modal-title">Private gallery</h3>
            <p>This gallery is protected. Enter the current OTP or the share code.</p>
            <div class="form-group">
                <label class="sr-only" for="share-code-input">Access code</label>
                <input type="password" id="share-code-input" autocomplete="one-time-code" placeholder="Enter access code">
            </div>
            <div class="modal-footer">
                <button id="unlock-btn" class="blocks-button blocks-button-primary min-h-11 w-full" type="button">Unlock gallery</button>
            </div>
        </div>
    </div>
</main>
{% endblock %}

{% block scripts %}
<div id="player-config" class="hidden" data-id="{{ query.id | default(value="") }}"
    data-code="{{ query.code | default(value="") }}">
</div>
<!-- Video Viewer Player Scripts -->
<script src="/plugins/video_viewer/assets/js/video_viewer_view.js"></script>
<script src="/plugins/video_viewer/assets/js/video_viewer_player.js"></script>
{% endblock %}