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

{% block page_title %}Static Website Hosting{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="/plugins/static-host/assets/css/site_file_manager.css">
{% endblock %}

{% block admin_content %}
<div data-plugin="static-host" {{ plugin_scope_attr }}>
    {{ crud::shell_open(config_url="/plugins/static-host/assets/admin/sites_list.json", mount_id="static-host-sites-list", custom_mount=true) }}

    <div class="mb-4 min-w-0 overflow-x-auto rounded-xl border border-border">
        <table class="blocks-responsive-table mb-0 w-full">
            <thead></thead>
            <tbody>
                <tr><td colspan="9" class="py-8 text-center text-muted" role="status" aria-live="polite">Loading sites…</td></tr>
            </tbody>
        </table>
    </div>

    {{ crud::shell_close() }}

    <div id="siteModal" class="crud-modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-hidden="true" tabindex="-1">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">Add Static Site</h3>
                <button type="button" class="close-btn" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <div id="static-host-site-form-fields"></div>
                <section class="space-y-3" id="payLinkSection" hidden aria-labelledby="pay-link-heading">
                    <h4 class="font-semibold text-foreground" id="pay-link-heading">Renewal Pay Link</h4>
                    <p class="text-sm leading-6 text-muted">Generate a unique pay link that extends the site validity by one year. Share this with the site owner as a renewal reminder.</p>
                    <input type="text" readonly id="payLinkDisplay" class="blocks-input" placeholder="No pay link yet — generate one after saving the site">
                    <div class="flex flex-wrap gap-2">
                        <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" id="btnGenPayToken" disabled>Generate / rotate pay link</button>
                        <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" id="btnCopyPayLink" disabled>Copy pay link</button>
                    </div>
                </section>
                <div class="form-group" id="editorAccessSection">
                    <p class="mb-3 text-sm leading-6 text-muted"><strong class="text-foreground">Optional secret link:</strong> editors can also use <code>?sh_editor=…</code> on any HTML URL (no login). Keep the token private.</p>
                    <input type="text" readonly id="editorTokenDisplay" class="blocks-input mb-3" placeholder="No token yet — generate one after saving the site">
                    <div class="flex flex-wrap gap-2">
                        <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" id="btnGenEditorToken" disabled>Generate / rotate token</button>
                        <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" id="btnCopyEditorLink" disabled>Copy editor link (home)</button>
                    </div>
                    <div class="mt-3 flex items-start gap-2">
                        <input type="checkbox" class="mt-1 size-4 shrink-0 accent-brand" id="clearEditorToken">
                        <label class="text-sm text-foreground" for="clearEditorToken">Clear editor token when saving site settings</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="filesModal" class="crud-modal" hidden aria-hidden="true"></div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/static-host/assets/js/site_file_manager.js" defer></script>
<script src="/plugins/static-host/assets/js/sites_list.js" defer></script>
<script src="/plugins/static-host/assets/js/static_host.js" defer></script>
{% endblock %}