{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Maintenance{% endblock %}
{% block heading %}Maintenance{% endblock %}
{% block subheading %}Opérations de fond de la plateforme{% endblock %}

{% block content %}
  <div data-maintenance>
    <section class="card glass ops" data-reindex data-reindex-url="{{ mediaReindexUrl }}" data-animate>
      <div class="ops__head">
        <span class="ops__icon">{{ icons.i('refresh') }}</span>
        <div class="ops__intro">
          <h2>Réindexer tous les médias</h2>
          <p class="muted">
            Reconstruit l'index Meilisearch des médias par lots. À lancer après une
            restauration de base ou une dérive de l'index. L'opération s'exécute en
            arrière-plan, lot par lot, sans bloquer Hydrogen.
          </p>
        </div>
        <button class="btn" type="button" data-reindex-start>
          {{ icons.i('refresh') }}<span>Lancer la réindexation</span>
        </button>
      </div>

      <div class="ops__progress" data-reindex-progress hidden>
        <div class="ops__bar"><span data-reindex-bar style="width:0%"></span></div>
        <div class="ops__meta">
          <span data-reindex-status></span>
          <span class="muted" data-reindex-detail></span>
        </div>
      </div>

      <p class="alert alert--error" data-reindex-error hidden></p>
    </section>
  </div>
{% endblock %}