<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}CDN{% endblock %} — Static Alpinux</title>
  <link rel="icon" type="image/x-icon" href="https://static.alpinux.org/logo/favicon.ico">
  <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
  <script>
    (function(){var cw=localStorage.getItem('content-width');if(cw)document.documentElement.dataset.cw=cw;})();
  </script>
</head>
<body>

<header>
  <div class="header-inner">
    <a href="{{ url_for('dashboard') }}" class="brand">
      <img src="https://static.alpinux.org/logo/alpinux-logo.png" alt="Alpinux" width="36" height="36">
      <span>A<strong>l</strong>p<strong>inux</strong> <span class="brand-sub">Static</span></span>
    </a>
    <nav class="header-nav">
      <a href="{{ url_for('browse') }}"
         {% if request.endpoint == 'browse' %}class="active"{% endif %}>Parcourir</a>
      <a href="{{ url_for('stats') }}"
         {% if request.endpoint in ('stats', 'stats_report') %}class="active"{% endif %}>Statistiques</a>
      <a href="{{ url_for('errors_404') }}"
         {% if request.endpoint == 'errors_404' %}class="active"{% endif %}>Erreurs</a>
<a href="{{ url_for('trash_list') }}"
         class="nav-trash{% if request.endpoint == 'trash_list' %} active{% endif %}">Corbeille{% if trash_count %}<span class="trash-badge">{{ trash_count }}</span>{% endif %}</a>
    </nav>
    <form class="header-search" action="{{ url_for('search') }}" method="get" role="search">
      <input type="search" name="q" placeholder="Rechercher…"
             value="{{ request.args.get('q', '') }}" aria-label="Recherche">
      <button type="submit" aria-label="Lancer la recherche">🔍</button>
    </form>
    <div class="width-switcher" title="Largeur du contenu">
      <button type="button" data-width="900"  title="Étroit (~900 px)">S</button>
      <button type="button" data-width="1200" title="Normal (~1200 px)">M</button>
      <button type="button" data-width="1600" title="Large (~1600 px)">L</button>
      <button type="button" data-width=""     title="Plein écran">∞</button>
    </div>
    <div class="header-user">
      {% if user %}
        <span class="user-chip" title="{{ user.name }}">
          <span class="user-avatar">{{ user.name[0] }}</span>
          {{ user.name.split()[0] }}
        </span>
        <a href="{{ url_for('logout') }}" class="btn-logout-icon" title="Se déconnecter">⎋</a>
      {% endif %}
    </div>
  </div>
</header>

<main>
  {% with msgs = get_flashed_messages(with_categories=true) %}
  {% for cat, msg in msgs %}
    <div class="flash-bar flash-bar--{{ cat }}">{{ msg }}</div>
  {% endfor %}
  {% endwith %}
  {% block content %}{% endblock %}
</main>

<footer>
  <div class="footer-inner">
    <a href="{{ url_for('dashboard') }}" class="footer-brand">
      <img src="https://static.alpinux.org/logo/alpinux-logo.png" alt="Alpinux" width="22" height="22">
      <span>Alpinux <strong>Static</strong></span>
    </a>
    <nav class="footer-nav">
      <a href="{{ url_for('browse') }}">Parcourir</a>
      <a href="{{ url_for('stats') }}">Statistiques</a>
      <a href="{{ url_for('trash_list') }}">Corbeille</a>
    </nav>
    <a href="{{ url_for('changelog') }}" class="footer-version">v&nbsp;{{ app_version }}</a>
  </div>
</footer>

<script>
(function () {
  const KEY = 'content-width';
  const btns = document.querySelectorAll('.width-switcher button');
  const html  = document.documentElement;

  function applyActive(val) {
    btns.forEach(b => b.classList.toggle('ws-active', b.dataset.width === (val || '')));
  }

  applyActive(localStorage.getItem(KEY));

  btns.forEach(btn => btn.addEventListener('click', () => {
    const val = btn.dataset.width;
    if (val) {
      localStorage.setItem(KEY, val);
      html.dataset.cw = val;
    } else {
      localStorage.removeItem(KEY);
      delete html.dataset.cw;
    }
    applyActive(val);
  }));
})();
</script>
</body>
</html>
