{% 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="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' %}">
    <script src="{% static 'django_sonar/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'django_sonar/js/htmx.min.js' %}"></script>
</head>

<body class="">

    <div class="container">
        <header class="d-flex flex-wrap justify-content-center py-3 px-3 mb-3 border-bottom">
            <a href="{% url 'sonar_index' %}"
                class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none">
                <span class="fs-4 text-dark">
                    <i class="bi bi-broadcast"></i>
                    Django Sonar
                </span>
            </a>
            <ul class="nav nav-pills gap-1">
                <!--
            <a href="#" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="bottom"
               title="Pause / Resume">
                <i class="bi bi-pause-fill"></i>
            </a>
            -->
                <a href="{% url 'sonar_request_clear' %}" class="btn btn-primary" data-bs-toggle="tooltip"
                    data-bs-placement="bottom" title="Clear all">
                    <i class="bi bi-trash-fill"></i>
                </a>
            </ul>
        </header>
        <main>
            <div class="row">
                <div class="col-lg-2 col-sm-12 mb-3">
                    <div class="card shadow-sm  border-0">
                        <div class="card-body p-0 m-0">

                            <ul class="nav nav-pills nav-fill flex-column">
                                <li class="nav-item text-start">
                                    <a class="nav-link active" href="{% url 'sonar_requests' %}" hx-trigger="click"
                                        hx-swap="innerHTML" hx-get="{% url 'sonar_requests' %}"
                                        hx-target="#main-content">
                                        <i class="bi bi-arrow-left-right me-1"></i>
                                        Requests
                                    </a>
                                </li>
                                <li class="nav-item text-start">
                                    <a class="nav-link" href="{% url 'sonar_exceptions' %}" hx-trigger="click"
                                        hx-swap="innerHTML" hx-get="{% url 'sonar_exceptions' %}"
                                        hx-target="#main-content">
                                        <i class="bi bi-exclamation-triangle me-1"></i>
                                        Exceptions
                                    </a>
                                </li>
                                <li class="nav-item text-start">
                                    <a class="nav-link" href="{% url 'sonar_dumps' %}" hx-get="{% url 'sonar_dumps' %}"
                                        hx-swap="innerHTML" hx-trigger="click" hx-target="#main-content">
                                        <i class="bi bi-terminal-fill me-1"></i>
                                        Dumps
                                    </a>
                                </li>
                                <li class="nav-item text-start">
                                    <a class="nav-link" href="{% url 'sonar_queries' %}"
                                        hx-get="{% url 'sonar_queries' %}" hx-trigger="click" hx-swap="innerHTML"
                                        hx-target="#main-content">
                                        <i class="bi bi-database me-1"></i>
                                        Queries
                                    </a>
                                </li>
                                <li class="nav-item text-start">
                                    <a class="nav-link" href="{% url 'sonar_signals' %}"
                                        hx-get="{% url 'sonar_signals' %}" hx-trigger="click" hx-swap="innerHTML"
                                        hx-target="#main-content">
                                        <i class="bi bi-diagram-3 me-1"></i>
                                        Signals
                                    </a>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
                <div class="col-lg-10 col-sm-12" id="main-content">
                    <script>
                        htmx.ajax('GET', "{% url 'sonar_requests' %}", { target: '#main-content' });
                    </script>
                </div>
            </div>
            <div class="text-center fw-lighter mt-2">
                <span class="text-muted fw-small">Crafted with ❤️+🍺️ in Friuli</span>
            </div>
        </main>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })

            document.querySelectorAll('.nav-link').forEach(function (link) {
                link.addEventListener('click', function () {
                    // Remove active class from all menu items
                    document.querySelectorAll('.nav-link').forEach(function (item) {
                        item.classList.remove('active');
                    });
                    // Add active class to the clicked menu item
                    this.classList.add('active');
                });
            });


        })
    </script>
    <script src="{% static 'django_sonar/js/sql-formatter.min.js' %}"></script>
</body>

</html>