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

{% block page_title %}PDF Maker{% endblock %}
{% block admin_content %}
{{ crud::shell_open(config_url="/plugins/pdf-maker/assets/admin/templates_list.json", mount_id="pdf-maker-list", custom_mount=true) }}
<div data-crud-toolbar-extra>
    <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" onclick="pmShowQuickRender()">Quick render</button>
</div>
<section class="mb-6 rounded-2xl bg-brand px-5 py-6 text-white shadow-sm sm:px-8 sm:py-8">
    <h1 class="m-0 text-2xl font-bold tracking-tight sm:text-3xl">PDF templates</h1>
    <p class="mb-0 mt-2 max-w-3xl text-sm leading-6 text-white/90">Design reusable documents, add Tera variables when needed, then preview and download print-ready PDFs.</p>
</section>

<section class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3" aria-label="PDF Maker summary">
    <div class="rounded-xl border border-divider bg-surface p-4 shadow-sm">
        <span class="block text-xs font-semibold uppercase tracking-wide text-muted">Templates</span>
        <span class="mt-1 block text-2xl font-bold tabular-nums text-foreground" id="pm-template-count" aria-live="polite">—</span>
    </div>
    <div class="rounded-xl border border-divider bg-surface p-4 shadow-sm">
        <span class="block text-xs font-semibold uppercase tracking-wide text-muted">PDF engine</span>
        <span class="mt-1 block text-base font-semibold text-foreground">Tera + WeasyPrint</span>
    </div>
    <div class="rounded-xl border border-divider bg-surface p-4 shadow-sm">
        <span class="block text-xs font-semibold uppercase tracking-wide text-muted">Page sizes</span>
        <span class="mt-1 block text-base font-semibold text-foreground">A4 / A3</span>
    </div>
</section>

<div hidden aria-hidden="true">
    <table class="templates-fetch-table">
        <thead></thead>
        <tbody><tr><td colspan="1">Loading templates…</td></tr></tbody>
    </table>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3" id="pm-template-grid" aria-live="polite" aria-busy="true">
    <div class="col-span-full rounded-xl border border-dashed border-divider p-8 text-center text-muted">Loading templates…</div>
</div>
{{ crud::shell_close() }}

<div class="crud-modal" id="pmRenderModal" role="dialog" aria-modal="true" aria-labelledby="pmRenderModalTitle">
    <div class="modal-content w-full max-w-xl">
        <div class="modal-header">
            <h3 id="pmRenderModalTitle">Render Template</h3>
            <button type="button" class="close-btn" aria-label="Close render dialog" onclick="pmCloseModal('pmRenderModal')">&times;</button>
        </div>
        <div class="modal-body">
            <div class="mb-4">
                <label class="mb-1 block text-sm font-semibold text-foreground" for="pmRenderFilename">Output filename</label>
                <input class="blocks-input" id="pmRenderFilename" type="text" value="document.pdf">
                <p class="mb-0 mt-1 text-xs text-muted">Extension .pdf will be added if missing.</p>
            </div>
            <div class="mb-4">
                <label class="mb-1 block text-sm font-semibold text-foreground" for="pmRenderContext">Context (JSON)</label>
                <textarea class="blocks-input min-h-40 resize-y font-mono" id="pmRenderContext"
                    placeholder='{ "title": "Example", "items": [...] }'>{}</textarea>
                <p class="mb-0 mt-1 text-xs text-muted">Optional data to fill into the template variables.</p>
            </div>

            <div class="mt-6 flex flex-col-reverse justify-end gap-3 sm:flex-row">
                <button type="button" class="blocks-button blocks-button-secondary" onclick="pmCloseModal('pmRenderModal')">Cancel</button>
                <button type="button" class="blocks-button blocks-button-primary" id="pmRenderBtn" onclick="pmDoRender()">
                    Download PDF
                </button>
            </div>
        </div>
    </div>
</div>

<div class="crud-modal" id="pmQuickModal" role="dialog" aria-modal="true" aria-labelledby="pmQuickModalTitle">
    <div class="modal-content w-full max-w-3xl">
        <div class="modal-header">
            <h3 id="pmQuickModalTitle">Quick render</h3>
            <button type="button" class="close-btn" aria-label="Close quick render dialog" onclick="pmCloseModal('pmQuickModal')">&times;</button>
        </div>
        <div class="modal-body">
            <div class="mb-4">
                <label class="mb-1 block text-sm font-semibold text-foreground" for="pmQuickFilename">Output filename</label>
                <input class="blocks-input" id="pmQuickFilename" type="text" value="quick.pdf">
            </div>
            <div class="mb-4">
                <label class="mb-1 block text-sm font-semibold text-foreground" for="pmQuickHtml">HTML template</label>
                <textarea class="blocks-input min-h-52 resize-y font-mono" id="pmQuickHtml"
                    placeholder="{% raw %}<h1>{{ title }}</h1>\n<p>{{ body }}</p>{% endraw %}"></textarea>
            </div>
            <div class="mb-4">
                <label class="mb-1 block text-sm font-semibold text-foreground" for="pmQuickContext">Context (JSON)</label>
                <textarea class="blocks-input min-h-24 resize-y font-mono" id="pmQuickContext"
                    placeholder='{"title":"Hello","body":"World"}'>{}</textarea>
            </div>

            <div class="mt-6 flex flex-col-reverse justify-end gap-3 sm:flex-row">
                <button type="button" class="blocks-button blocks-button-secondary" onclick="pmCloseModal('pmQuickModal')">Cancel</button>
                <button type="button" class="blocks-button blocks-button-primary" id="pmQuickBtn" onclick="pmDoQuickRender()">
                    Download PDF
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/pdf-maker/assets/js/pdf_list.js"></script>
<script src="/plugins/pdf-maker/assets/js/index.js"></script>
{% endblock %}