{% extends "base.html" %}
{% block title %}Listado de Cambios{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h2 class="fw-bold mb-0"><i class="bi bi-list-ul text-primary"></i> Cambios Registrados</h2>
  {% if current_user.rol.nombre in ['Promotor','Administrador'] %}
  <a href="{{ url_for('cambios.alta') }}" class="btn btn-primary">
    <i class="bi bi-plus-circle"></i> Nuevo Cambio
  </a>
  {% endif %}
</div>

<div class="card shadow-sm border-0">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover mb-0 align-middle">
        <thead class="table-primary">
          <tr>
            <th>#</th>
            <th>Sistema</th>
            <th>Solicitante</th>
            <th>Incidencia</th>
            <th>Descripción</th>
            <th>F. Pruebas</th>
            <th class="text-center">Estatus</th>
            <th>Registro</th>
            <th class="text-center">PDF</th>
          </tr>
        </thead>
        <tbody>
          {% for c in cambios.items %}
          <tr>
            <td class="fw-bold">{{ c.id }}</td>
            <td>{{ c.sistema.nombre if c.sistema else '-' }}</td>
            <td>{{ c.solicitante.nombre_completo if c.solicitante else '-' }}</td>
            <td>{{ c.numero_incidencia }}</td>
            <td>
              {{ (c.descripcion_breve or '')[:60] }}
              {{ '…' if c.descripcion_breve and c.descripcion_breve|length > 60 else '' }}
            </td>
            <td>{{ c.fecha_pruebas | fecha_mx }}</td>
            <td class="text-center">
              {% if c.estatus == 'Solicitado' %}
                <span class="badge bg-warning text-dark">Solicitado</span>
              {% elif c.estatus == 'Programado' %}
                <span class="badge bg-primary">Programado</span>
              {% else %}
                <span class="badge bg-success">Liberado</span>
              {% endif %}
            </td>
            <td class="small text-muted">{{ c.creado_en | fecha_mx }}</td>
            <td class="text-center">
              <a href="{{ url_for('cambios.descargar_pdf', id=c.id) }}"
                 class="btn btn-sm btn-outline-danger" title="Descargar PDF">
                <i class="bi bi-file-earmark-pdf"></i>
              </a>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="9" class="text-center text-muted py-4">
              <i class="bi bi-inbox fs-3 d-block mb-2"></i>No hay cambios registrados.
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% if cambios.pages > 1 %}
<nav class="mt-3">
  <ul class="pagination pagination-sm justify-content-center">
    {% for p in cambios.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
      {% if p %}
        <li class="page-item {{ 'active' if p == cambios.page else '' }}">
          <a class="page-link" href="{{ url_for('cambios.lista', page=p) }}">{{ p }}</a>
        </li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">…</span></li>
      {% endif %}
    {% endfor %}
  </ul>
</nav>
{% endif %}
{% endblock %}