    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold dark:text-white flex items-center gap-2">
                <span class="text-pink-500">📅</span> Social Content Calendar
            </h1>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Plan posts across 8 platforms — for Meg</p>
        </div>
        <button hx-get="/admin/social-calendar/new" hx-target="#spp-modal-body" hx-swap="innerHTML"
                onclick="document.getElementById('spp-modal').classList.remove('hidden')"
                class="bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded-md text-sm font-medium shadow">
            ➕ New Post
        </button>
    </div>

    <div id="week-container"
         hx-get="/admin/social-calendar/week?week=<%= weekStartISO %>"
         hx-trigger="load, refresh-week from:body">
        <div class="flex items-center justify-center h-64">
            <div class="text-center">
                <div class="text-4xl mb-4 animate-pulse">⏳</div>
                <p class="text-gray-500 dark:text-gray-400">Loading calendar...</p>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div id="spp-modal" class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" onclick="if(event.target===this) this.classList.add('hidden')">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div id="spp-modal-body"></div>
        </div>
    </div>

    <!-- Asset browser modal (higher z-index so it sits on top of the form modal) -->
    <div id="spp-assets-modal" class="hidden fixed inset-0 bg-black/70 z-[60] flex items-center justify-center p-4" onclick="if(event.target===this) this.classList.add('hidden')">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <div id="spp-assets-modal-body"></div>
        </div>
    </div>

    <script>
        document.body.addEventListener('htmx:afterRequest', function(evt) {
            if (evt.detail.xhr.status === 200 || evt.detail.xhr.status === 201) {
                if (evt.detail.xhr.getResponseHeader('HX-Trigger') === 'refresh-week') {
                    document.getElementById('spp-modal').classList.add('hidden');
                }
            }
        });
        // Called when a thumbnail is clicked — append filename to media_notes textarea
        window.sppInsertAsset = function(relPath) {
            var ta = document.querySelector('#spp-modal textarea[name="media_notes"]');
            if (ta) {
                var prefix = ta.value && !ta.value.endsWith('\n') ? '\n' : '';
                ta.value = ta.value + prefix + relPath;
                ta.focus();
            }
            document.getElementById('spp-assets-modal').classList.add('hidden');
        };
    </script>
