<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %> — STOA</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;500;700;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <%
    const can = typeof canAccess === 'function' ? canAccess : function () { return true; };
    const showDashboard = can('dashboard');
    const showProgrammes = can('programmes');
    const showAdmHub = can('adm');
    const showActeurs = can('adm.acteurs');
    const showRoles = can('adm.roles');
    const showAcces = can('adm.acces');
    const showJournal = can('adm.journal');
    const showAdmGroup = typeof hasAdmAccess === 'boolean'
      ? hasAdmAccess
      : (showAdmHub || showActeurs || showRoles || showAcces || showJournal);
    const admOpen = currentPath.startsWith('/adm');
  %>
  <div class="app-shell">
    <aside class="sidebar">
      <a href="<%= showDashboard ? '/' : (showProgrammes ? '/programmes' : '#') %>" class="brand">
        <span class="logo" aria-label="stoa">
          <span class="logo-word">
            <span class="logo-s">s</span><span class="logo-t">t</span><span class="logo-o">o</span><span class="logo-a">a</span>
          </span>
          <span class="logo-tagline">Construction productive</span>
        </span>
      </a>
      <nav class="nav">
        <% if (showDashboard) { %>
          <a href="/" class="nav-link <%= currentPath === '/' ? 'is-active' : '' %>">Tableau de bord</a>
        <% } %>
        <% if (showProgrammes) { %>
          <a href="/programmes" class="nav-link <%= currentPath.startsWith('/programmes') ? 'is-active' : '' %>">Programmes</a>
        <% } %>

        <% if (showAdmGroup) { %>
          <div class="nav-group <%= admOpen ? 'is-open' : '' %>">
            <% if (showAdmHub) { %>
              <a href="/adm" class="nav-link nav-group-title <%= admOpen ? 'is-active' : '' %>">ADM</a>
            <% } else { %>
              <span class="nav-link nav-group-title <%= admOpen ? 'is-active' : '' %>">ADM</span>
            <% } %>
            <% if (admOpen) { %>
              <div class="nav-sub">
                <% if (showActeurs) { %>
                  <a href="/adm/acteurs" class="nav-link nav-sub-link <%= currentPath.startsWith('/adm/acteurs') ? 'is-active' : '' %>">Acteurs</a>
                <% } %>
                <% if (showRoles) { %>
                  <a href="/adm/roles" class="nav-link nav-sub-link <%= currentPath.startsWith('/adm/roles') ? 'is-active' : '' %>">Rôles</a>
                <% } %>
                <% if (showAcces) { %>
                  <a href="/adm/acces" class="nav-link nav-sub-link <%= currentPath.startsWith('/adm/acces') ? 'is-active' : '' %>">Accès</a>
                <% } %>
                <% if (showJournal) { %>
                  <a href="/adm/journal" class="nav-link nav-sub-link <%= currentPath.startsWith('/adm/journal') ? 'is-active' : '' %>">Journal</a>
                <% } %>
              </div>
            <% } %>
          </div>
        <% } %>
      </nav>
      <div class="sidebar-foot">
        <div class="sidebar-foot-main">
          <span class="sidebar-foot-logo" aria-hidden="true">
            <span class="sidebar-foot-mark">β</span>
          </span>
          <div class="sidebar-foot-text">
            <span class="sidebar-foot-beta">version BETA</span>
            <span class="sidebar-foot-author">Chris Dev</span>
            <% if (typeof currentUser !== 'undefined' && currentUser) { %>
              <span class="sidebar-foot-user"><%= currentUser.prenom %> <%= currentUser.nom %></span>
            <% } %>
          </div>
        </div>
        <% if (typeof currentUser !== 'undefined' && currentUser) { %>
          <form method="POST" action="/logout" class="sidebar-logout">
            <button type="submit" class="btn btn-ghost sidebar-logout-btn">Déconnexion</button>
          </form>
        <% } %>
      </div>
    </aside>

    <div class="main">
      <header class="topbar">
        <h1><%= title %></h1>
        <div class="topbar-actions">
          <button
            type="button"
            class="btn btn-ghost topbar-back"
            onclick="if (document.referrer) { history.back(); } else { location.href = '/'; }"
          >
            ← Retour
          </button>
        </div>
      </header>
      <main class="content">
