<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ title }} - Pynenc Monitor</title>

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <!-- Material Design Icons -->
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />

    <!-- Custom Pynmon CSS -->
    <link href="/static/css/pynmon.css" rel="stylesheet" />
    <link href="/static/css/timeline.css" rel="stylesheet" />
    <link href="/static/css/arguments.css" rel="stylesheet" />
    <link href="/static/css/invocations.css" rel="stylesheet" />
    {% block extra_css %}{% endblock %}

    <!-- HTMX for dynamic updates -->
    <script src="https://unpkg.com/htmx.org@1.9.2"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <a class="navbar-brand" href="/"
          ><img src="/static/logo.png" alt="Pynenc" class="navbar-logo" />
          Pynenc Monitor</a
        >
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a
                class="nav-link {{ 'active' if request.url.path == '/' }}"
                href="/"
              >
                <span class="material-icons">dashboard</span>
                Dashboard
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link {{ 'active' if '/broker' in request.url.path }}"
                href="/broker"
              >
                <span class="material-icons">queue</span>
                Broker
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link {{ 'active' if '/orchestrator' in request.url.path }}"
                href="/orchestrator"
              >
                <span class="material-icons">settings</span>
                Orchestrator
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link {{ 'active' if '/runners' in request.url.path and 'atomic-service' not in request.url.path }}"
                href="/runners"
              >
                <span class="material-icons">devices</span>
                Runners
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link {{ 'active' if 'atomic-service' in request.url.path }}"
                href="/runners/atomic-service/timeline"
              >
                <span class="material-icons">schedule</span>
                Atomic Service
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link {{ 'active' if '/state-backend' in request.url.path }}"
                href="/state-backend"
              >
                <span class="material-icons">storage</span>
                State Backend
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link {{ 'active' if '/client-data-store' in request.url.path }}"
                href="/client-data-store"
              >
                <span class="material-icons">cached</span>
                Data Store
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link {{ 'active' if '/invocations' in request.url.path and 'timeline' not in request.url.path }}"
                href="/invocations"
              >
                <span class="material-icons">list</span>
                Invocations
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link {{ 'active' if '/timeline' in request.url.path }}"
                href="/invocations/timeline"
              >
                <span class="material-icons">timeline</span>
                Timeline
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link {{ 'active' if '/tasks' in request.url.path }}"
                href="/tasks"
              >
                <span class="material-icons">task</span>
                Tasks
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link {{ 'active' if '/workflows' in request.url.path }}"
                href="/workflows"
              >
                <span class="material-icons">workspaces</span>
                Workflows
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link {{ 'active' if '/log-explorer' in request.url.path }}"
                href="/log-explorer"
              >
                <span class="material-icons">search</span>
                Log Explorer
              </a>
            </li>
          </ul>

          <ul class="navbar-nav ms-auto">
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="appDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                App: {{ app_id }}
              </a>
              <ul
                class="dropdown-menu dropdown-menu-end"
                aria-labelledby="appDropdown"
              >
                {% for app_name in all_apps %}
                <li>
                  <a
                    class="dropdown-item {{ 'active' if app_name == app_id }}"
                    href="/switch-app/{{ app_name }}"
                  >
                    {{ app_name }} {% if app_name == app_id %}
                    <span class="ms-2 badge bg-success">Active</span>
                    {% endif %}
                  </a>
                </li>
                {% endfor %}
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container mt-4">
      <h2 class="pynmon-title mb-3">{{ title }}</h2>

      {% block content %}
      <div class="row">
        <div class="col-md-6">
          <div class="card">
            <div class="card-header">Welcome to Pynenc Monitor</div>
            <div class="card-body">
              <p>
                Select a section from the navigation menu to start monitoring
                your Pynenc application.
              </p>
              <p>Currently monitoring app: <strong>{{ app_id }}</strong></p>
              <div class="mt-3">
                <button
                  class="btn btn-danger"
                  hx-post="/purge"
                  hx-confirm="⚠️ WARNING: This will purge ALL data from the broker, orchestrator, state backend, and argument cache. This operation cannot be undone! Continue?"
                  hx-swap="outerHTML"
                >
                  Purge All Application Data
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endblock %}
    </div>

    <!-- Loading overlay (shown on slow navigation) -->
    <div id="pynmon-loading" class="pynmon-loading-overlay">
      <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading…</span>
      </div>
      <span class="loading-text">Loading…</span>
    </div>

    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Global loading-overlay logic -->
    <script>
      (function () {
        const overlay = document.getElementById("pynmon-loading");
        if (!overlay) return;

        // Show overlay when a normal <a> link navigates to a slow page
        document.querySelectorAll('a[href^="/"]').forEach(function (link) {
          // Skip links that open new tabs, HTMX links, or hash-only links
          if (
            link.target === "_blank" ||
            link.hasAttribute("hx-get") ||
            link.getAttribute("href") === "#"
          )
            return;
          link.addEventListener("click", function () {
            overlay.classList.add("active");
          });
        });

        // Show overlay when a filter form is submitted (e.g. invocations, timeline)
        document
          .querySelectorAll("form[method='get']")
          .forEach(function (form) {
            form.addEventListener("submit", function () {
              overlay.classList.add("active");
            });
          });

        // Hide overlay when the page is loaded from bfcache (back/forward)
        window.addEventListener("pageshow", function (e) {
          if (e.persisted) overlay.classList.remove("active");
        });
      })();
    </script>

    <!-- Extra JavaScript block for child templates -->
    {% block extra_js %}{% endblock %}
  </body>
</html>
