{% extends "base.html" %}
{% block title %}Aplicación de Cambios{% endblock %}

{% block content %}
<div class="d-flex align-items-center mb-4">
  <h2 class="fw-bold mb-0">
    <i class="bi bi-gear text-primary"></i> Aplicación de Cambios
    <span class="badge bg-primary ms-2 fs-6">Transacción 2</span>
  </h2>
</div>

<p class="text-muted">
  Cambios en estatus <strong>Solicitado</strong> pendientes de asignación técnica.
  Seleccione uno para completar la información de aplicación.
</p>

{% if cambios %}
<div class="row g-3">
  {% for c in cambios %}
  <div class="col-md-6 col-xl-4">
    <div class="card h-100 shadow-sm border-0 border-start border-4 border-warning">
      <div class="card-body">
        <div class="d-flex justify-content-between mb-2">
          <span class="badge bg-warning text-dark">Solicitud #{{ c.id }}</span>
          <small class="text-muted">{{ c.creado_en | fecha_mx }}</small>
        </div>
        <h6 class="fw-bold">{{ c.sistema.nombre if c.sistema else '-' }}</h6>
        <p class="small text-muted mb-1">
          <i class="bi bi-person"></i> {{ c.solicitante.nombre_completo if c.solicitante else '-' }}
        </p>
        <p class="small mb-1">
          <strong>Incidencia:</strong> {{ c.numero_incidencia }}
        </p>
        <p class="small text-muted mb-2">
          {{ (c.descripcion_breve or '')[:80] }}{{ '…' if c.descripcion_breve and c.descripcion_breve|length > 80 else '' }}
        </p>
        <p class="small mb-3">
          <i class="bi bi-calendar-check"></i>
          <strong>F. Pruebas:</strong> {{ c.fecha_pruebas | fecha_mx }}
        </p>
        <a href="{{ url_for('cambios.aplicacion_detalle', id=c.id) }}"
           class="btn btn-primary btn-sm w-100">
          <i class="bi bi-pencil-square"></i> Completar Aplicación
        </a>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="text-center text-muted py-5">
  <i class="bi bi-check-circle fs-1 text-success d-block mb-3"></i>
  <p>No hay cambios pendientes de aplicación.</p>
  <a href="{{ url_for('dashboard.index') }}" class="btn btn-outline-primary">Volver al Dashboard</a>
</div>
{% endif %}
{% endblock %}