{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/workspace_ui.html" as ui %}

{% block page_title %}Video Viewer Management{% endblock %}

{% block admin_content %}
<main class="blocks-workspace mx-auto w-full max-w-7xl space-y-5 px-4 py-5 text-foreground sm:px-6 sm:py-8" data-plugin="video_viewer">
    <header><p class="text-sm font-semibold text-primary">Media library</p><h1 class="mt-1 text-2xl font-bold tracking-tight sm:text-3xl">Video folders</h1><p class="mt-2 text-sm text-muted">Choose where videos are stored and who can view each collection.</p></header>
    {{ ui::notice() }}
    {{ crud::shell_open(config_url="/plugins/video_viewer/assets/admin/folders_list.json", mount_id="video-viewer-folders-list") }}
    <table>
        <thead></thead>
        <tbody id="folders-table-body">
            <tr><td colspan="4" class="crud-empty-state">Loading folders…</td></tr>
        </tbody>
    </table>
    {{ crud::shell_close() }}
</main>

<div id="folder-modal" class="crud-modal" aria-hidden="true" aria-labelledby="modal-title" role="dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modal-title">Add Video Folder</h3>
            <button type="button" class="close-modal close-btn" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body min-h-0 overflow-y-auto">
            <div id="video-folder-form-fields"></div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/blocks-media-folders-admin.js"></script>
<script src="/plugins/video_viewer/assets/js/folders_list.js"></script>
{% endblock %}