<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}{{ app.name }}{% endblock %} · {{ app.name }}</title>
  <script>
    (function () {
      var t = localStorage.getItem("hyperion-theme");
      if (t !== "light" && t !== "dark") {
        t = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
      }
      document.documentElement.setAttribute("data-theme", t);
    })();
  </script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/assets/vendor/jsvectormap.css">
  <link rel="stylesheet" href="/assets/vendor/flag-icons/css/flag-icons.min.css">
  <link rel="stylesheet" href="/assets/vendor/maplibre-gl.css">
  <link rel="stylesheet" href="/assets/css/app.css">
</head>
<body>
  {% import 'partials/icons.twig' as icons %}
  <div class="aurora"></div>
  <div class="shell">
    <div class="nav-backdrop" data-nav-backdrop></div>
    {% include 'partials/sidebar.twig' %}
    <div class="main">
      <header class="topbar glass">
        <button class="icon-btn nav-toggle" type="button" data-nav-toggle aria-label="Ouvrir le menu" aria-expanded="false">
          {{ icons.i('menu') }}
        </button>

        <div class="topbar__title">
          <h1>{% block heading %}{{ block('title') }}{% endblock %}</h1>
          <p>{% block subheading %}Surface d'administration Hydrogen{% endblock %}</p>
        </div>

        <button class="topbar__search" type="button" data-palette-open aria-label="Rechercher (Ctrl+K)">
          {{ icons.i('search') }}
          <span>Rechercher…</span>
          <kbd class="kbd">Ctrl K</kbd>
        </button>

        <button class="icon-btn theme-toggle" type="button" data-theme-toggle aria-label="Changer de thème">
          <span class="theme-toggle__sun">{{ icons.i('sun') }}</span>
          <span class="theme-toggle__moon">{{ icons.i('moon') }}</span>
        </button>

        <button class="icon-btn" type="button" aria-label="Notifications">
          <span class="dot"></span>
          {{ icons.i('bell') }}
        </button>

        <div class="avatar">
          <div class="avatar__img">{{ (auth.firstname|default(auth.username|default('U')))|first|upper }}{{ (auth.name|default(' '))|first|upper }}</div>
          <div class="avatar__meta">
            <div class="avatar__name">{{ auth.firstname|default('') }} {{ auth.name|default(auth.username|default('')) }}</div>
            <div class="avatar__role">{{ auth.role|default('consultant') }}</div>
          </div>
        </div>
      </header>

      {% block content %}{% endblock %}
    </div>
  </div>

  {% set rank = { 'consultant': 1, 'moderator': 2, 'admin': 3 } %}
  {% set myRank = rank[auth.role|default('consultant')] %}
  <div class="palette" data-palette data-palette-search-url="{{ url_for('users.search') }}" data-user-base="{{ url_for('users') }}" hidden>
    <div class="palette__panel" role="dialog" aria-modal="true" aria-label="Recherche">
      <div class="palette__search">
        {{ icons.i('search') }}
        <input type="search" data-palette-input placeholder="Aller à une page ou rechercher un utilisateur…" aria-label="Rechercher une page ou un utilisateur" autocomplete="off">
      </div>
      <div class="palette__list" data-palette-list>
        <div class="palette__group" data-palette-users hidden>
          <div class="palette__group-title">Utilisateurs</div>
          <div data-palette-users-list></div>
        </div>
        {% for group in navigation %}
          {% set visible = group.items|filter(item => rank[item.min] <= myRank) %}
          {% if visible|length %}
            <div class="palette__group" data-group="{{ group.label }}">
              <div class="palette__group-title">{{ group.label }}</div>
              {% for item in visible %}
                <a class="palette__item" data-palette-item
                   data-label="{{ item.label|lower }} {{ group.label|lower }}"
                   href="{{ url_for(item.route) }}">
                  {{ icons.i(item.icon) }}
                  <span class="palette__item-label">{{ item.label }}</span>
                  <span class="palette__item-group">{{ group.label }}</span>
                </a>
              {% endfor %}
            </div>
          {% endif %}
        {% endfor %}
        <div class="palette__empty" data-palette-empty hidden>Aucun résultat</div>
      </div>
    </div>
  </div>

  {% include 'partials/media-modal.twig' %}

  {# Visionneuse plein écran : agrandit l'avatar / la couverture d'un profil. #}
  <div class="imgview" data-imgview hidden role="dialog" aria-modal="true" aria-label="Aperçu de l'image">
    <button class="imgview__close" type="button" data-imgview-close aria-label="Fermer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M18 6L6 18M6 6l12 12"/>
      </svg>
    </button>
    <img class="imgview__img" data-imgview-img alt="">
  </div>

  <script src="/assets/vendor/chart.umd.min.js" defer></script>
  <script src="/assets/vendor/jsvectormap.min.js" defer></script>
  <script src="/assets/vendor/jsvectormap-world.js" defer></script>
  <script src="/assets/vendor/maplibre-gl.js" defer></script>
  <script src="/assets/js/app.js" defer></script>
</body>
</html>
