{% extends 'django_tailwind/app.html' %}
{% load static %}
{% load centrifugo_tags %}

{% block title %}{% block page_title_text %}Centrifugo Monitor{% endblock %} - Django-CFG{% endblock %}

{% block header %}
{% with navbar_items=centrifugo_nav_items %}
{% include 'django_tailwind/components/navbar.html' with title="Centrifugo Monitor" icon='<span class="material-icons text-3xl text-purple-400">notifications_active</span>' nav_items=navbar_items full_width=True %}
{% endwith %}

<div class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <div class="flex items-center gap-3">
            <!-- Health Status -->
            <div id="health-indicator" class="flex items-center gap-1.5 px-3 py-1.5 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                <span class="pulse-dot w-2 h-2 bg-green-500 rounded-full"></span>
                <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Configured</span>
            </div>

            <!-- WebSocket Status -->
            <div id="header-ws-status" class="flex items-center gap-1.5 px-3 py-1.5 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
                <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Connecting...</span>
            </div>

            <!-- Auto-refresh Toggle -->
            <label class="flex items-center gap-2 px-3 py-1.5 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:border-purple-300 dark:hover:border-purple-700 transition-colors">
                <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Auto-refresh</span>
                <input type="checkbox" id="auto-refresh-toggle" checked
                       class="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-purple-600 dark:text-purple-500 focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:ring-offset-0">
            </label>

            <!-- Centrifugo UI Button -->
            {% centrifugo_admin_url as admin_url %}
            {% if admin_url %}
            <a href="{{ admin_url }}" target="_blank" rel="noopener noreferrer"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-purple-600 dark:text-purple-400 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-purple-300 dark:hover:border-purple-700 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-colors"
               title="Open Centrifugo Admin UI">
                <span class="material-icons text-sm">open_in_new</span>
                <span>Centrifugo UI</span>
            </a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_head %}
{{ block.super }}
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>

<!-- Dashboard Styles -->
<link rel="stylesheet" href="{% static 'django_cfg_centrifugo/css/dashboard.css' %}">
{% block extra_css %}{% endblock %}
{% endblock %}

{% block body %}
{{ block.super }}
{% endblock %}