{#
    Default Frontend - Individual Library Loading
    Load libraries separately for more control and smaller initial load
#}

<!-- Tailwind CSS -->
<script src="{{ frontend.tailwind_cdn }}"></script>

<!-- ECharts (optional, for charts) -->
{% if frontend.enable_echarts %}
<script src="{{ frontend.echarts_cdn }}"></script>
{% endif %}

<!-- Flowbite CSS (optional, for UI components) -->
{% if frontend.enable_flowbite %}
<link href="{{ frontend.flowbite_css }}" rel="stylesheet" />
{% endif %}

<!-- HTMX -->
<script src="{{ frontend.htmx_cdn }}"></script>

<!-- Alpine.js (MUST be loaded last - it auto-initializes) -->
<script defer src="{{ frontend.alpine_cdn }}"></script>

{% if frontend.enable_flowbite %}
<!-- Flowbite JS (after Alpine) -->
<script src="{{ frontend.flowbite_js }}"></script>
{% endif %}

<style>
    /* HTMX indicators */
    .htmx-request .htmx-indicator {
        display: inline-block;
    }
    .htmx-indicator {
        display: none;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #f1f5f9;
    }
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
</style>

<script>
    // HTMX configuration
    document.body.addEventListener('htmx:beforeSwap', function(evt) {
        if (evt.detail.xhr.status === 422) {
            evt.detail.shouldSwap = true;
            evt.detail.isError = false;
        }
    });

    // Alpine.js initialization (if you need custom stores)
    document.addEventListener('alpine:init', () => {
        // Global store for shared state
        Alpine.store('app', {
            loading: false,
            user: null,
            notifications: [],

            setLoading(state) {
                this.loading = state;
            },

            addNotification(message, type = 'info') {
                this.notifications.push({ message, type, id: Date.now() });
                setTimeout(() => {
                    this.notifications = this.notifications.filter(n => n.id !== id);
                }, 5000);
            }
        });
    });
</script>