{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Index{% endblock %}
{% block heading %}Index{% endblock %}
{% block subheading %}Métriques et santé des index Meilisearch{% endblock %}

{% set indexKpis = {
  'totalDocs': { 'label': 'Documents indexés', 'icon': 'database' },
  'okCount':   { 'label': 'Index disponibles', 'icon': 'check' },
  'indexing':  { 'label': 'Indexations en cours', 'icon': 'refresh' },
  'size':      { 'label': 'Taille de la base', 'icon': 'bolt' }
} %}

{% block content %}
  <div data-index data-health-url="{{ healthUrl }}">
    <div class="alert alert--error" data-index-error hidden>
      Le moteur de recherche est injoignable — impossible de charger l'état des index.
    </div>

    <section class="grid grid--kpi">
      {% for key, def in indexKpis %}
        <article class="kpi glass" data-index-kpi="{{ key }}" data-animate>
          <div class="kpi__top">
            <div class="kpi__icon">{{ icons.i(def.icon) }}</div>
          </div>
          <div class="kpi__value" data-index-kpi-value>
            <span class="skeleton skeleton--text" style="width:90px;height:24px"></span>
          </div>
          <div class="kpi__label">{{ def.label }}</div>
        </article>
      {% endfor %}
    </section>

    <article class="card glass" data-animate>
      <div class="card__head">
        <h2>Index Meilisearch</h2>
        <span class="muted" data-index-updated></span>
      </div>
      <ul class="health" data-index-list>
        {% for i in 1..9 %}
          <li class="health__row">
            <span class="skeleton skeleton--text" style="flex:1;height:18px"></span>
          </li>
        {% endfor %}
      </ul>
    </article>
  </div>
{% endblock %}