{% extends "base.html" %}
{% block title %}Historial de cambios{% endblock %}
{% block page_title %}Historial de cambios{% endblock %}

{% block content %}

<div class="card">
  <div class="card-header py-3 d-flex align-items-center justify-content-between">
    <span><i class="bi bi-clock-history me-2"></i>Últimas {{ registros|length }} acciones de {{ total }} totales</span>
    <form class="d-flex gap-2" method="get">
      <input type="search" name="q" value="{{ q }}" class="form-control form-control-sm"
             style="width:220px" placeholder="Buscar en el historial...">
      <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-search"></i></button>
      {% if q %}<a href="{{ url_for('historial.index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-x"></i>
      </a>{% endif %}
    </form>
  </div>

  {% if not registros %}
  <div class="text-center py-5 text-muted">
    <i class="bi bi-clock-history" style="font-size:3rem;opacity:.3"></i>
    <p class="mt-3">
      {% if q %}No hay resultados para "{{ q }}"{% else %}El historial está vacío{% endif %}
    </p>
  </div>
  {% else %}
  <div class="table-responsive">
    <table class="table table-hover mb-0" style="font-size:.875rem">
      <thead>
        <tr>
          <th style="width:160px">Fecha y hora</th>
          <th>Descripción</th>
          <th style="width:100px">Tipo</th>
        </tr>
      </thead>
      <tbody>
        {% for r in registros %}
        <tr>
          <td class="text-muted small font-monospace">{{ r.created_at }}</td>
          <td>{{ r.descripcion or '—' }}</td>
          <td>
            <span class="badge rounded-pill
              {% if r.accion == 'factura' %}bg-primary bg-opacity-10 text-primary
              {% elif r.accion == 'masivo' %}bg-success bg-opacity-10 text-success
              {% else %}bg-secondary bg-opacity-10 text-secondary{% endif %}"
              style="font-size:.72rem">
              {{ r.accion }}
            </span>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</div>

{% endblock %}