{% extends 'django_cfg_centrifugo/layout/base.html' %}
{% load static %}

{% block title %}Centrifugo Monitor Dashboard{% endblock %}

{% block content %}
<!-- System Status -->
{% include 'django_cfg_centrifugo/components/system_status.html' %}

<!-- Statistics Cards -->
{% include 'django_cfg_centrifugo/components/stat_cards.html' %}

<!-- Tab Navigation -->
{% include 'django_cfg_centrifugo/components/tab_navigation.html' %}

<!-- Tab Content -->
<div class="tab-content">
    {% include 'django_cfg_centrifugo/components/overview_content.html' %}
    {% include 'django_cfg_centrifugo/components/publishes_content.html' %}
    {% include 'django_cfg_centrifugo/components/channels_content.html' %}
    {% include 'django_cfg_centrifugo/components/live_channels_content.html' %}
    {% include 'django_cfg_centrifugo/components/testing_tools.html' %}
</div>
{% endblock %}

{% block extra_js %}
{% load i18n %}
{% now "U" as current_timestamp %}

<!-- Load and initialize Centrifugo API -->
<script type="module">
try {
    console.log('🔄 Starting CentrifugoAPI module import...');
    const { loadAPI, showNotification } = await import('/static/js/api-loader.mjs');

    // Load centrifugo API
    const centrifugoAPI = await loadAPI('centrifugo');
    console.log('✅ CentrifugoAPI module imported successfully:', centrifugoAPI);

    // Make it available globally as centrifugoAPI
    window.centrifugoAPI = centrifugoAPI;
    window.showNotification = showNotification;

    console.log('✅ CentrifugoAPI loaded from generated MJS client');
} catch (error) {
    console.error('❌ Failed to load CentrifugoAPI module:', error);
    console.error('Error stack:', error.stack);
    window.centrifugoAPI = null;
}
</script>

<!-- Dashboard Modules -->
<script type="module" src="{% static 'django_cfg_centrifugo/js/dashboard/overview.mjs' %}?v={{ current_timestamp }}"></script>
<script type="module" src="{% static 'django_cfg_centrifugo/js/dashboard/testing.mjs' %}?v={{ current_timestamp }}"></script>
<script type="module" src="{% static 'django_cfg_centrifugo/js/dashboard/live_channels.mjs' %}?v={{ current_timestamp }}"></script>
<script type="module" src="{% static 'django_cfg_centrifugo/js/dashboard/live_testing.mjs' %}?v={{ current_timestamp }}"></script>
<script type="module" src="{% static 'django_cfg_centrifugo/js/dashboard/main.mjs' %}?v={{ current_timestamp }}"></script>
{% endblock %}