{% load static %}
{% with vendor_base='https://cdn.jsdelivr.net/npm/' %}
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Верификатор IoC</title>
  <script>
    window.STATIC_BASE = "{% static 'verificator/' %}";
    window.VENDOR_BASE = "{{ vendor_base }}";
  </script>
  <link id="theme-stylesheet" href="{{ vendor_base }}bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="{{ vendor_base }}bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet" />
  <link href="{{ vendor_base }}gridstack@10.1.2/dist/gridstack.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="{% static 'verificator/styles.css' %}" />
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4 app-navbar">
    <div class="container-fluid app-navbar-layout">
      <div class="d-flex flex-column">
        <span class="navbar-brand fw-semibold mb-0">Панель анализа IOC</span>
        <small class="text-white-50 navbar-subtitle">Виджеты: перетаскивайте, скрывайте и добавляйте блоки.</small>
      </div>
      <div class="d-flex align-items-center gap-2 navbar-actions ms-auto">
        <div class="dropdown">
          <button
            class="btn btn-outline-light btn-sm dropdown-toggle d-flex align-items-center gap-2"
            type="button"
            id="theme-dropdown"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <i class="bi bi-palette2"></i>
            <span id="active-theme-name">Default</span>
          </button>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="theme-dropdown" id="theme-menu"></ul>
        </div>
        <div class="dropdown">
          <button
            class="btn btn-light btn-sm dropdown-toggle"
            type="button"
            id="add-widget-dropdown"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <i class="bi bi-plus-lg"></i>
            Добавить окно
          </button>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="add-widget-dropdown" id="widget-template-menu"></ul>
        </div>
      </div>
    </div>
  </nav>

  <main class="container-fluid px-4">
    <div class="grid-stack" id="widgets-grid"></div>
  </main>

  <div class="toast-container position-fixed top-0 end-0 p-3" id="toast-container"></div>

  <script src="{{ vendor_base }}bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="{{ vendor_base }}gridstack@10.1.2/dist/gridstack-all.js"></script>
  <script type="module" src="{% static 'verificator/main.js' %}"></script>
</body>
</html>
{% endwith %}
