Htmx/templates/docs/modals.html

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

{% block title %}Dialog Modals - Design System Wiki{% endblock %}

{% block content %}
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
    
    <!-- Left Navigation Sidebar -->
    {% include "docs/sidebar.html" %}

    <!-- Main Content -->
    <div class="flex-1 space-y-8">
        
        <!-- Header -->
        <div class="pb-6 border-b border-border">
            <span class="text-xs font-semibold text-indigo-400">Overlays</span>
            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Dialog Modals</h1>
            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
                Overlay window popups centering inside the viewport with scale animations, hardware blur filters, and document-level listeners for escape-key/backdrop dismissals.
            </p>
        </div>

        <!-- Section Modals -->
        <section class="space-y-4">
            <h2 class="text-lg font-bold text-slate-200">Modal Showcase & Integration</h2>
            
            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
                <!-- Tab Headers -->
                <div class="flex border-b border-border/60 pb-1.5">
                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'modal-sandbox')">Interactive Demo</button>
                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'modal-code')">HTML Markup</button>
                </div>
                
                <!-- Demo Viewport -->
                <div id="modal-sandbox" class="wiki-pane py-2">
                    {{ ui::modal_trigger(target_id="wiki-demo-modal", label="Open Modal Dialog", variant="indigo") }}
                </div>
                
                <!-- Code Snippet Area -->
                <div id="modal-code" class="wiki-pane hidden space-y-4">
                    <div class="relative group">
                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                            Copy Code
                        </button>
                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}

&lt;!-- Trigger Button (points to modal element ID) --&gt;
{{ "{{" }} ui::modal_trigger(target_id="my-modal-id", label="Open Modal Dialog", variant="indigo") {{ "}}" }}

&lt;!-- Option A: Simple Modal (Self-contained with text body) --&gt;
{{ "{{" }} ui::modal(id="my-modal-id", title="Confirmation Title", content="Are you sure you want to proceed?", close_label="Cancel") {{ "}}" }}

&lt;!-- Option B: Paired Macros (For custom markup, inputs, or headers) --&gt;
{{ "{{" }} ui::modal_open(id="my-modal-id", title="Confirmation Title") {{ "}}" }}
    &lt;p class="text-xs text-muted-foreground mt-2 leading-relaxed"&gt;Are you sure you want to proceed?&lt;/p&gt;
{{ "{{" }} ui::modal_close(close_label="Cancel") {{ "}}" }}</code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Global JS Bindings Documentation -->
        <section class="space-y-4 border-t border-border/60 pt-6">
            <h2 class="text-lg font-bold text-slate-200">How the Global Modal JS Works</h2>
            <p class="text-xs text-muted-foreground leading-relaxed">
                The global script <code>components.js</code> runs automatically on page load and monitors specific attributes and classes. Here is what makes the modal operational:
            </p>
            <div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
                <table class="w-full border-collapse text-left text-xs">
                    <thead>
                        <tr class="border-b border-border text-muted-foreground font-bold">
                            <th class="pb-2.5 w-1/4">Selector / Class</th>
                            <th class="pb-2.5 w-1/4">Type</th>
                            <th class="pb-2.5">Behavior & Purpose</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">[data-modal-target]</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
                            <td class="py-3 text-slate-400">
                                Applied to buttons or triggers. The value must match the ID of the modal dialog (e.g., <code>data-modal-target="my-modal"</code>). Clicking it triggers <code>openModal("my-modal")</code>.
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.modal-dialog</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                The outer wrapper container. Starts with the class <code>hidden</code>. The JS removes/adds <code>hidden</code> to show/hide the popup.
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.modal-content</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                The inner dialog panel card. The JS looks for this class to toggle transitions (adds <code>scale-100 opacity-100</code> on show; resets to <code>scale-95 opacity-0</code> on hide).
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.modal-backdrop</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                The dark blur overlay. The JS toggles its opacity and registers clicks on it to automatically close the modal.
                            </td>
                        </tr>
                        <tr>
                            <td class="py-3 font-mono text-indigo-400 font-semibold">.modal-close</td>
                            <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                            <td class="py-3 text-slate-400">
                                Applied to any close button (e.g., "Cancel", "Confirm", or an "X" icon). Clicking any element containing this class triggers modal closure.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
                <span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
                <p class="text-slate-400 leading-normal">
                    You can customize the styling, colors, layout, and sizing of the <code>.modal-content</code> card freely. You must preserve the classes listed above so the Javascript code can target them and apply animations correctly.
                </p>
            </div>
        </section>

        <!-- Confirmation Action Pattern -->
        <section class="space-y-4 border-t border-border/60 pt-6">
            <h2 class="text-lg font-bold text-slate-200">Confirmation Actions (e.g., Deletes)</h2>
            <p class="text-xs text-muted-foreground leading-relaxed">
                To prevent accidental actions, wrap destructive or state-changing actions (such as deletions) in a confirmation dialog modal. Since modals are populated inside the DOM structure, you can either wrap the action inside a standard HTML form or use HTMX for AJAX deletions.
            </p>

            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
                <!-- Tab Headers -->
                <div class="flex border-b border-border/60 pb-1.5">
                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'confirm-demo-pane')">Interactive Demo</button>
                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'confirm-markup-form')">Form POST (Standard)</button>
                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'confirm-markup-htmx')">HTMX Delete (AJAX)</button>
                </div>

                <!-- Interactive Demo Pane -->
                <div id="confirm-demo-pane" class="wiki-pane py-2">
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-slate-400 font-medium">Demo Project Entity:</span>
                        <div class="flex items-center gap-3 px-3 py-2 bg-secondary/20 border border-border rounded-xl">
                            <span class="text-xs font-semibold text-slate-200">Important Draft.docx</span>
                            {{ ui::modal_trigger(target_id="wiki-confirm-delete-modal", label="Delete Draft", variant="destructive", extra_class="!px-2.5 !py-1 text-[10px]") }}
                        </div>
                    </div>
                </div>

                <!-- Form POST Code Markup -->
                <div id="confirm-markup-form" class="wiki-pane hidden space-y-4">
                    <div class="relative group">
                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                            Copy Code
                        </button>
                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}

&lt;!-- 1. The Trigger Button (usually part of a table or list) --&gt;
{{ "{{" }} ui::modal_trigger(target_id="delete-confirm-modal-123", label="Delete Entity", variant="destructive") {{ "}}" }}

&lt;!-- 2. The Confirmation Dialog Modal with embedded Form --&gt;
{{ "{%" }} call ui::modal_open(id="delete-confirm-modal-123", title="Confirm Deletion") {{ "%}" }}
    &lt;form action="/entities/123/delete" method="POST" class="space-y-4 mt-2"&gt;
        &lt;p class="text-xs text-muted-foreground leading-relaxed text-center"&gt;
            Are you sure you want to permanently delete this entity? This action cannot be undone.
        &lt;/p&gt;
        
        &lt;div class="flex gap-3 mt-4"&gt;
            &lt;!-- Cancel Button (closes the modal via .modal-close) --&gt;
            &lt;button type="button" class="modal-close flex-1 py-2 rounded-xl bg-secondary border border-border hover:bg-secondary/80 transition text-xs font-semibold text-slate-200"&gt;
                Cancel
            &lt;/button&gt;
            &lt;!-- Submit Button (performs POST redirect) --&gt;
            &lt;button type="submit" class="flex-1 py-2 rounded-xl bg-destructive text-destructive-foreground hover:opacity-90 shadow-md transition text-xs font-bold"&gt;
                Confirm Delete
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/form&gt;
{{ "{%" }} call ui::modal_close_only() {{ "%}" }}</code></pre>
                    </div>
                </div>

                <!-- HTMX AJAX Code Markup -->
                <div id="confirm-markup-htmx" class="wiki-pane hidden space-y-4">
                    <div class="relative group">
                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                            Copy Code
                        </button>
                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}

&lt;!-- 1. Trigger Button --&gt;
{{ "{{" }} ui::modal_trigger(target_id="delete-htmx-modal-123", label="Delete Entity", variant="destructive") {{ "}}" }}

&lt;!-- 2. The Confirmation Dialog Modal with HTMX triggers --&gt;
{{ "{%" }} call ui::modal_open(id="delete-htmx-modal-123", title="Confirm Deletion") {{ "%}" }}
    &lt;div class="space-y-4 mt-2"&gt;
        &lt;p class="text-xs text-muted-foreground leading-relaxed text-center"&gt;
            Are you sure you want to delete this entity? This triggers an async HTMX request and removes the element.
        &lt;/p&gt;
        
        &lt;div class="flex gap-3 mt-4"&gt;
            &lt;!-- Cancel Button --&gt;
            &lt;button type="button" class="modal-close flex-1 py-2 rounded-xl bg-secondary border border-border hover:bg-secondary/80 transition text-xs font-semibold text-slate-200"&gt;
                Cancel
            &lt;/button&gt;
            &lt;!-- HTMX Action button. Adding .modal-close closes the modal animation instantly as the request goes out --&gt;
            &lt;button type="button" 
                    hx-delete="/entities/123" 
                    hx-target="#entity-row-123" 
                    hx-swap="outerHTML"
                    class="modal-close flex-1 py-2 rounded-xl bg-destructive text-destructive-foreground hover:opacity-90 shadow-md transition text-xs font-bold"&gt;
                Confirm Delete
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
{{ "{%" }} call ui::modal_close_only() {{ "%}" }}</code></pre>
                    </div>
                </div>
            </div>
        </section>


    </div>
</div>

<!-- Interactive Modal Sandbox Element using paired macros -->
{{ ui::modal_open(id="wiki-demo-modal", title="Wiki Sandbox Modal") }}
    <p class="text-xs text-slate-405 mt-2 leading-relaxed">This modal is animated and handled globally by <code>components.js</code>. Pressing escape or clicking outside closes it instantly.</p>
{{ ui::modal_close(close_label="Dismiss Modal") }}

<!-- Interactive Confirm Delete Modal for the Demo -->
{{ ui::modal_open(id="wiki-confirm-delete-modal", title="Confirm Deletion") }}
    <div class="space-y-4 mt-2">
        <p class="text-xs text-slate-400 leading-relaxed text-center">
            Are you sure you want to permanently delete <strong class="text-slate-200">"Important Draft.docx"</strong>? This action cannot be undone.
        </p>
        <div class="flex gap-3 mt-4">
            <button class="modal-close flex-1 py-2 rounded-xl bg-secondary border border-border hover:bg-secondary/80 transition text-xs font-semibold text-slate-200">
                Cancel
            </button>
            <button class="modal-close flex-1 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-white transition text-xs font-bold shadow-md" onclick="showToast('Entity &ldquo;Important Draft.docx&rdquo; deleted successfully!')">
                Confirm Delete
            </button>
        </div>
    </div>
{{ ui::modal_close_only() }}


<script>
    function toggleWikiTabs(btn, paneId) {
        const card = btn.closest('.border-border');
        if (!card) return;
        card.querySelectorAll('button').forEach(b => {
            b.classList.remove('border-sky-500', 'text-sky-400');
            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
        });
        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
        btn.classList.add('border-sky-500', 'text-sky-400');
        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
        const target = card.querySelector('#' + paneId);
        if (target) target.classList.remove('hidden');
    }
</script>
{% endblock %}