{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Jobs & files{% endblock %}
{% block heading %}Jobs & files{% endblock %}
{% block subheading %}Surveillance des traitements de fond{% endblock %}

{% block content %}
  <div data-jobs data-workers-url="{{ workersUrl }}" data-runs-url="{{ runsUrl }}">

    {# ── Onglets ──────────────────────────────────────────────────── #}
    <div class="tabs" role="tablist" data-animate>
      <button class="tab is-active" type="button" role="tab" aria-selected="true"
              data-tab="workers" id="tab-workers" aria-controls="panel-workers">
        Workers
      </button>
      <button class="tab" type="button" role="tab" aria-selected="false"
              data-tab="runs" id="tab-runs" aria-controls="panel-runs">
        Historique des passages
      </button>
    </div>

    {# ── Onglet : Workers (santé) ─────────────────────────────────── #}
    <div class="tabpanel" id="panel-workers" role="tabpanel" aria-labelledby="tab-workers" data-panel="workers">
      <div class="alert alert--error" data-workers-error hidden>
        Le service Hydrogen est injoignable — impossible de charger l'état des workers.
      </div>

      <section class="grid grid--kpi">
        <article class="kpi glass" data-animate>
          <div class="kpi__top"><div class="kpi__icon">{{ icons.i('cog') }}</div></div>
          <div class="kpi__value"><span data-wk-kpi="total">—</span></div>
          <div class="kpi__label">Workers suivis</div>
        </article>
        <article class="kpi glass" data-animate>
          <div class="kpi__top"><div class="kpi__icon">{{ icons.i('calendar') }}</div></div>
          <div class="kpi__value"><span data-wk-kpi="overdue">—</span></div>
          <div class="kpi__label">En retard</div>
        </article>
        <article class="kpi glass" data-animate>
          <div class="kpi__top"><div class="kpi__icon">{{ icons.i('ban') }}</div></div>
          <div class="kpi__value"><span data-wk-kpi="failing">—</span></div>
          <div class="kpi__label">En échec</div>
        </article>
      </section>

      <article class="card glass" data-animate>
        <div class="card__head"><h2>État des workers</h2></div>
        <div class="lgc-table-wrap">
          <table class="lgc-table">
            <thead>
              <tr>
                <th>Worker</th><th>Environnement</th><th>Dernier passage</th>
                <th>Silence</th><th>Cadence</th>
                <th class="lgc-num">24 h</th><th>État</th>
              </tr>
            </thead>
            <tbody data-workers-body>
              {% for i in 1..4 %}
                <tr class="lgc-row lgc-row--skeleton">
                  <td colspan="7"><span class="skeleton skeleton--text" style="width:100%;height:20px"></span></td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <p class="muted lgc-empty" data-workers-empty hidden>Aucun worker n'a encore rapporté de passage.</p>
        {# La limite est réelle : un worker jamais déployé ne peut pas être vu ici. #}
        <p class="muted wk-note" data-workers-note hidden></p>
      </article>
    </div>

    {# ── Onglet : Historique des passages ─────────────────────────── #}
    <div class="tabpanel" id="panel-runs" role="tabpanel" aria-labelledby="tab-runs" data-panel="runs" hidden>
      <div class="alert alert--error" data-runs-error hidden>
        Le service Hydrogen est injoignable — impossible de charger le journal des passages.
      </div>

      <article class="card glass" data-animate>
        <div class="card__head">
          <h2>Passages <span class="sx-count" data-runs-count hidden></span></h2>
          <div class="wk-filters">
            <label class="mfilter__search wk-filter__search">
              {{ icons.i('search') }}
              <input type="search" data-runs-worker placeholder="Filtrer par worker…" autocomplete="off">
            </label>
            <div class="mm-period" role="group" aria-label="Filtrer par statut">
              <button class="mm-period__btn is-active" type="button" data-runs-status="">Tous</button>
              <button class="mm-period__btn" type="button" data-runs-status="ok">Succès</button>
              <button class="mm-period__btn" type="button" data-runs-status="failed">Échec</button>
            </div>
          </div>
        </div>

        <p class="muted lgc-empty" data-runs-empty hidden>Aucun passage pour ces filtres.</p>
        <ul class="wk-runs" data-runs-list>
          {% for i in 1..5 %}
            <li class="wk-run"><span class="skeleton skeleton--text" style="width:100%;height:38px"></span></li>
          {% endfor %}
        </ul>
      </article>
    </div>
  </div>
{% endblock %}