{% extends "base.html" %}

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

{% block content %}
<div id="player-container" class="slideshow-player-container" data-overlay-stack="none">
    <div id="slideshow-overlay" class="slideshow-overlay">
        <div class="loader-spinner"></div>
    </div>

    <div id="slides-wrapper" class="slides-wrapper">
        <!-- Slides will be injected here -->
    </div>

    <!-- Controls -->
    <div class="player-controls">
        <button id="prev-btn" class="control-btn" title="Previous"><i class="fas fa-chevron-left"></i></button>
        <button id="play-pause-btn" class="control-btn" title="Play/Pause"><i class="fas fa-pause"></i></button>
        <button id="next-btn" class="control-btn" title="Next"><i class="fas fa-chevron-right"></i></button>
        <button id="fullscreen-btn" class="control-btn" title="Toggle Fullscreen"><i class="fas fa-expand"></i></button>
    </div>

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

    <!-- Password Modal for shared galleries -->
    <div id="password-modal" class="modal">
        <div class="modal-content card">
            <h3>Private Gallery</h3>
            <p>This slideshow is protected. Please enter the dynamic OTP or share code.</p>
            <div class="form-group">
                <input type="password" id="share-code-input" class="form-control" placeholder="Enter Code">
            </div>
            <div class="modal-footer">
                <button id="unlock-btn" class="btn btn-primary btn-block">Unlock</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<div id="player-config" style="display:none;" data-id="{{ query.id | default(value="") }}"
    data-code="{{ query.code | default(value="") }}">
</div>
<!-- Slideshow Player Scripts -->
<script src="/plugins/slideshow/assets/js/slideshow_view.js"></script>
<script src="/plugins/slideshow/assets/js/slideshow_player.js"></script>
{% endblock %}