thrillwiki_django_no_react/templates/moderation/dashboard.html

{% extends "base/base.html" %}
{% load static %}

{% block title %}ThrillWiki Moderation{% endblock %}

{% block extra_css %}
<style>
/* Form Elements */
.form-select {
    @apply rounded-lg border-gray-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 bg-gray-800 text-gray-300 transition-colors duration-200;
}

/* Transitions */
[x-cloak] {
    display: none !important;
}

.fade-enter-active,
.fade-leave-active {
    @apply transition-all duration-200;
}

.fade-enter-from,
.fade-leave-to {
    @apply opacity-0;
}

/* HTMX Loading States */
.htmx-request .htmx-indicator {
    @apply opacity-100;
}

.htmx-request.htmx-indicator {
    @apply opacity-100;
}

.htmx-indicator {
    @apply opacity-0 transition-opacity duration-200;
}

/* Animations */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}
</style>
{% endblock %}

{% block content %}
<div class="container max-w-6xl px-4 py-6 mx-auto">
    <div id="dashboard-content" class="relative transition-opacity duration-200">
        {% block moderation_content %}
            {% include "moderation/partials/dashboard_content.html" %}
        {% endblock %}
        
        <div id="loading-indicator" 
             class="absolute inset-0 flex items-center justify-center rounded-lg htmx-indicator bg-gray-900/80">
            <div class="flex items-center p-6 space-x-4">
                <div class="w-8 h-8 border-4 border-blue-500 rounded-full animate-spin border-t-transparent"></div>
                <span class="text-gray-300">Loading...</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Configure HTMX to include CSRF token in all requests
document.body.addEventListener('htmx:configRequest', function(evt) {
    evt.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
});

document.body.addEventListener('htmx:beforeRequest', function(evt) {
    if (evt.detail.target.id === 'dashboard-content') {
        evt.detail.target.style.opacity = '0.5';
    }
});

document.body.addEventListener('htmx:afterOnLoad', function(evt) {
    if (evt.detail.target.id === 'dashboard-content') {
        evt.detail.target.style.opacity = '1';
    }
});
</script>
{% endblock %}