LogWhispererAI/.opencode/skills/templates/htmx-template.html

{% extends "base.html" %}

{% block content %}
<div class="space-y-6">
    <!-- Header Section -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body p-4 md:p-6">
            <h1 class="card-title text-2xl">Page Title</h1>
            <p class="text-sm opacity-70">Page description</p>
        </div>
    </div>

    <!-- HTMX Content Section with Loading State -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body p-4 md:p-6">
            <h2 class="card-title text-xl mb-4">Section Title</h2>

            <!-- HTMX Dynamic Content -->
            <div id="dynamic-content"
                 hx-get="/api/v1/endpoint/html"
                 hx-trigger="load"
                 hx-swap="innerHTML"
                 class="min-h-[100px] flex items-center justify-center">
                <!-- Loading spinner (shown until HTMX loads content) -->
                <span class="loading loading-spinner loading-lg text-primary"></span>
            </div>
        </div>
    </div>

    <!-- Quick Actions Section -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body p-4 md:p-6">
            <h2 class="card-title text-xl mb-4">💡 Quick Actions</h2>

            <!-- Desktop: Grid Layout (visible on >= md) -->
            <div class="hidden md:grid md:grid-cols-3 gap-3">
                <button onclick="openCreateModal()"
                        class="btn btn-success gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    Create
                </button>

                <button onclick="openEditModal()"
                        class="btn btn-warning gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    Edit
                </button>

                <a href="/another-page" class="btn btn-accent gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                    Go to Page
                </a>
            </div>

            <!-- Mobile: Mini Cards Row (visible on < md) -->
            <div class="grid grid-cols-3 gap-2 md:hidden">
                <button onclick="openCreateModal()"
                        class="flex flex-col items-center gap-1 p-3 rounded-xl bg-success text-success-content hover:brightness-95 active:scale-95 transition-all shadow-md">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    <span class="text-xs font-medium">Create</span>
                </button>

                <button onclick="openEditModal()"
                        class="flex flex-col items-center gap-1 p-3 rounded-xl bg-warning text-warning-content hover:brightness-95 active:scale-95 transition-all shadow-md">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    <span class="text-xs font-medium">Edit</span>
                </button>

                <a href="/another-page"
                   class="flex flex-col items-center gap-1 p-3 rounded-xl bg-accent text-accent-content hover:brightness-95 active:scale-95 transition-all shadow-md">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                    <span class="text-xs font-medium">Go</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Collapsible Section (Mobile-only) -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body py-4">
            <!-- Header with expand indicator (clickable on mobile only) -->
            <div class="flex items-center justify-between cursor-pointer md:cursor-default"
                 onclick="toggleSection()" id="section-header">
                <h2 class="card-title text-xl mb-2">📊 Collapsible Section</h2>
                <span class="expand-indicator badge badge-outline badge-sm opacity-60 hover:opacity-100 cursor-pointer transition-opacity md:hidden">
                    <span class="indicator-text">+</span>
                </span>
            </div>

            <!-- Collapsible content (hidden on mobile by default) -->
            <div id="section-content"
                 class="min-h-[100px] hidden md:block">
                <p>This content is collapsible on mobile devices.</p>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for collapsible section -->
<script>
function toggleSection() {
    // Only toggle on mobile (< md breakpoint)
    if (window.innerWidth >= 768) return;

    const content = document.getElementById('section-content');
    const indicator = document.querySelector('#section-header .indicator-text');

    if (content.classList.contains('hidden')) {
        content.classList.remove('hidden');
        indicator.textContent = '−';
    } else {
        content.classList.add('hidden');
        indicator.textContent = '+';
    }
}
</script>
{% endblock %}