{% load static %}
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Django Sonar</title>
    <link rel="icon" type="image/svg+xml" href="{% static 'django_sonar/media/logos/sonar.svg' %}">
    <link rel="shortcut icon" href="{% static 'django_sonar/media/logos/favicon.png' %}">
    <link rel="stylesheet" href="{% static 'django_sonar/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'django_sonar/css/bootstrap-icons.min.css' %}">
    <link rel="stylesheet" href="{% static 'django_sonar/css/django-sonar.css' %}">
    <link rel="stylesheet" href="{% static 'django_sonar/css/dark-theme.css' %}">
    <script>
        (function () {
            var theme = localStorage.getItem('sonar-theme');
            if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.documentElement.setAttribute('data-theme', 'dark');
            }
        })();
    </script>
    <script src="{% static 'django_sonar/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'django_sonar/js/htmx.min.js' %}"></script>
</head>

<body>

    <header class="sonar-header">
        <div class="container">
            <div class="d-flex align-items-center justify-content-between">
                <a href="{% url 'sonar_index' %}" class="sonar-logo text-decoration-none">
                    <span class="logo-icon">
                        <svg viewBox="0 0 64 64" fill="none" width="18" height="18">
                            <circle cx="32" cy="32" r="5" fill="currentColor" />
                            <path d="M32 19a13 13 0 0 1 0 26" stroke="currentColor" stroke-width="4"
                                stroke-linecap="round" fill="none" opacity="0.9" />
                            <path d="M32 19a13 13 0 0 0 0 26" stroke="currentColor" stroke-width="4"
                                stroke-linecap="round" fill="none" opacity="0.9" />
                            <path d="M32 11a21 21 0 0 1 0 42" stroke="currentColor" stroke-width="3.5"
                                stroke-linecap="round" fill="none" opacity="0.5" />
                            <path d="M32 11a21 21 0 0 0 0 42" stroke="currentColor" stroke-width="3.5"
                                stroke-linecap="round" fill="none" opacity="0.5" />
                        </svg>
                    </span>
                    <span><span class="logo-text">django</span><span class="logo-text-accent">sonar</span></span>
                </a>
                <div class="d-flex align-items-center gap-2">
                    <button class="theme-toggle" id="theme-toggle" data-bs-toggle="tooltip" data-bs-placement="bottom"
                        title="Toggle theme">
                        <i class="bi bi-moon-fill"></i>
                        <i class="bi bi-sun-fill"></i>
                    </button>
                    <a href="{% url 'sonar_request_clear' %}" class="btn btn-danger-ghost btn-sm"
                        data-bs-toggle="tooltip" data-bs-placement="bottom" title="Clear all data">
                        <i class="bi bi-trash3 me-1"></i>Clear
                    </a>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <main>
            <div class="row">
                <div class="col-lg-2 col-sm-12 mb-3 sonar-sidebar">
                    <div class="card">
                        <div class="card-body">

                            <ul class="nav nav-pills nav-fill flex-column" id="sonar-panel-nav">
                                {% for panel in sonar_panels %}
                                {% if panel.key == 'signals' %}
                                {# Temporarily hidden from the left sidebar. #}
                                {% else %}
                                <li class="nav-item text-start">
                                    <a class="nav-link {% if panel.key == active_panel_key %}active{% endif %}"
                                        href="{{ panel.get_list_url }}" hx-trigger="click" hx-swap="innerHTML"
                                        hx-get="{{ panel.get_list_url }}" hx-target="#main-content" hx-push-url="true"
                                        data-panel-key="{{ panel.key }}">
                                        <i class="bi {{ panel.icon }}"></i>
                                        {{ panel.label }}
                                    </a>
                                </li>
                                {% endif %}
                                {% empty %}
                                <li class="nav-item text-start px-2 py-3 text-muted">No panels configured</li>
                                {% endfor %}
                            </ul>

                        </div>
                    </div>
                </div>
                <div class="col-lg-10 col-sm-12" id="main-content">
                    {% if initial_content_url %}
                    <script>
                        htmx.ajax('GET', '{{ initial_content_url|escapejs }}', { target: '#main-content' });
                    </script>
                    {% endif %}
                </div>
            </div>
            <div class="text-center sonar-footer">
                <span>Crafted with ❤️ in 🇮🇹</span>
            </div>
        </main>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })

            function getPanelKeyFromPath(pathname) {
                if (pathname.indexOf('/sonar/p/') !== -1) {
                    var pPath = pathname.split('/sonar/p/')[1] || ''
                    return pPath.split('/')[0] || null
                }
                if (pathname.indexOf('/sonar/requests') !== -1) return 'requests'
                if (pathname.indexOf('/sonar/queries') !== -1) return 'queries'
                if (pathname.indexOf('/sonar/exceptions') !== -1) return 'exceptions'
                if (pathname.indexOf('/sonar/dumps') !== -1) return 'dumps'
                if (pathname.indexOf('/sonar/signals') !== -1) return 'signals'
                if (pathname.indexOf('/sonar/events') !== -1) return 'events'
                if (pathname.indexOf('/sonar/logs') !== -1) return 'logs'
                return null
            }

            function syncActivePanel() {
                var panelKey = getPanelKeyFromPath(window.location.pathname)
                if (!panelKey) return

                document.querySelectorAll('#sonar-panel-nav .nav-link').forEach(function (item) {
                    item.classList.remove('active')
                })

                var target = document.querySelector('#sonar-panel-nav .nav-link[data-panel-key="' + panelKey + '"]')
                if (target) {
                    target.classList.add('active')
                }
            }

            document.querySelectorAll('#sonar-panel-nav .nav-link').forEach(function (link) {
                link.addEventListener('click', function () {
                    document.querySelectorAll('#sonar-panel-nav .nav-link').forEach(function (item) {
                        item.classList.remove('active')
                    })
                    this.classList.add('active')
                })
            })

            document.body.addEventListener('htmx:pushedIntoHistory', syncActivePanel)
            document.body.addEventListener('htmx:replacedInHistory', syncActivePanel)
            document.body.addEventListener('htmx:historyRestore', syncActivePanel)
            syncActivePanel()

            // Theme toggle
            var toggleBtn = document.getElementById('theme-toggle')
            if (toggleBtn) {
                toggleBtn.addEventListener('click', function () {
                    var html = document.documentElement
                    var current = html.getAttribute('data-theme')
                    var next = current === 'dark' ? 'light' : 'dark'
                    html.setAttribute('data-theme', next)
                    localStorage.setItem('sonar-theme', next)
                })
            }
        })
    </script>
    <script src="{% static 'django_sonar/js/sql-formatter.min.js' %}"></script>
</body>

</html>