{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Logs{% endblock %}
{% block heading %}Logs{% endblock %}
{% block subheading %}Journal applicatif d'Hydrogen (erreurs serveur){% endblock %}

{% block content %}
  <div data-logs data-list-url="{{ listUrl }}">

    {# ── Barre de filtres : niveau, chemin, statut, fenêtre de dates ────── #}
    <div class="log-toolbar" data-animate>
      <div class="mfilter__status" role="group" aria-label="Filtrer par niveau">
        <button class="mm-period__btn is-active" type="button" data-log-filter-level="">Tous</button>
        <button class="mm-period__btn" type="button" data-log-filter-level="error">Erreurs</button>
        <button class="mm-period__btn" type="button" data-log-filter-level="warning">Avertissements</button>
      </div>
      <label class="mfilter__search">
        {{ icons.i('search') }}
        <input type="search" data-log-path placeholder="Filtrer par chemin (ex. /api/media)…" autocomplete="off">
      </label>
      <input class="log-toolbar__status" type="number" data-log-status min="100" max="599" step="1"
             placeholder="Statut (ex. 500)" autocomplete="off" aria-label="Filtrer par code HTTP">
      <label class="log-toolbar__date">
        <span class="muted">Du</span>
        <input type="datetime-local" data-log-from aria-label="Date de début">
      </label>
      <label class="log-toolbar__date">
        <span class="muted">Au</span>
        <input type="datetime-local" data-log-to aria-label="Date de fin">
      </label>
      <button class="btn-ghost" type="button" data-log-reset>{{ icons.i('refresh') }} Réinitialiser</button>
    </div>

    {# ── Alerte d'indisponibilité ──────────────────────────────────────── #}
    <div class="alert alert--error" data-logs-error hidden>
      Le service Hydrogen est injoignable — impossible de charger les logs.
    </div>

    {# ── Liste des entrées ─────────────────────────────────────────────── #}
    <article class="card glass" data-animate>
      <ul class="log-list" data-logs-list>
        {% for i in 1..6 %}
          <li class="log-row log-row--skeleton">
            <span class="skeleton skeleton--text" style="width:100%;height:40px"></span>
          </li>
        {% endfor %}
      </ul>
      <p class="muted log-empty" data-logs-empty hidden>Aucune entrée ne correspond à ces filtres.</p>
      <div class="log-more">
        <button class="btn-ghost" type="button" data-logs-more hidden>Charger plus</button>
      </div>
    </article>
  </div>
{% endblock %}