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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'tasks/css/dashboard-alpine.css' %}">
{% endblock %}

{% block content %}
<div x-data="tasksDashboard()">
{% csrf_token %}

<!-- Management Actions -->
{% include 'tasks/components/management_actions.html' %}

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

<!-- Tab Content -->
<div class="tab-content mt-6">
    <!-- Overview Tab -->
    <div x-show="activeTab === 'overview'" x-cloak>
        {% include 'tasks/components/overview_content.html' %}
    </div>

    <!-- Queues Tab -->
    <div x-show="activeTab === 'queues'" x-cloak>
        {% include 'tasks/components/queues_content.html' %}
    </div>

    <!-- Workers Tab -->
    <div x-show="activeTab === 'workers'" x-cloak>
        {% include 'tasks/components/workers_content.html' %}
    </div>

    <!-- Tasks Tab -->
    <div x-show="activeTab === 'tasks'" x-cloak>
        {% include 'tasks/components/tasks_content.html' %}
    </div>
</div>

<!-- Templates for JavaScript -->
{% include 'tasks/partials/task_row_template.html' %}

<!-- Task Details Modal -->
{% include 'tasks/components/task_details_modal.html' %}
</div>
{% endblock %}

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

    // Load tasks API
    const tasksAPI = await loadAPI('tasks');
    console.log('✅ TasksAPI module imported successfully:', tasksAPI);

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

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

<!-- Alpine.js Dashboard Logic (Modular) - Registers component factory globally -->
<script type="module" src="{% static 'tasks/js/alpine/index.js' %}"></script>

<!-- Alpine.js Core - Will find and register the component when it initializes -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
{% endblock %}