{% extends "base.html" %}
{% block title %}Relación Usuario-Sistema{% 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-diagram-3 text-primary"></i> Relación Usuarios – Aplicación
  </h2>
  <a href="{{ url_for('relacion.asignar') }}" class="btn btn-primary">
    <i class="bi bi-plus-circle"></i> Nueva Asignación
  </a>
</div>

{% for sistema in sistemas %}
<div class="card shadow-sm border-0 mb-3">
  <div class="card-header bg-primary bg-opacity-10 d-flex justify-content-between align-items-center">
    <h6 class="mb-0 fw-bold text-primary">
      <i class="bi bi-hdd-network"></i> {{ sistema.nombre }}
      {% if not sistema.activo %}
        <span class="badge bg-secondary ms-2">Inactivo</span>
      {% endif %}
    </h6>
    <a href="{{ url_for('relacion.asignar', sistema_id=sistema.id) }}"
       class="btn btn-sm btn-outline-primary">
      <i class="bi bi-pencil"></i> Editar asignación
    </a>
  </div>
  <div class="card-body py-2">
    {% set relaciones = sistema.usuarios.all() %}
    {% if relaciones %}
      <div class="d-flex flex-wrap gap-2 py-1">
        {% for rel in relaciones %}
          <span class="badge bg-light text-dark border d-flex align-items-center gap-1 px-3 py-2">
            <i class="bi bi-person-fill text-primary"></i>
            {{ rel.usuario.nombre_completo }}
            <form method="POST" action="{{ url_for('relacion.eliminar', id=rel.id) }}"
                  class="d-inline ms-1"
                  onsubmit="return confirm('¿Eliminar relación con {{ rel.usuario.nombre_completo }}?')">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" class="btn btn-link btn-sm p-0 text-danger" title="Eliminar">
                <i class="bi bi-x-circle"></i>
              </button>
            </form>
          </span>
        {% endfor %}
      </div>
    {% else %}
      <p class="text-muted small mb-0 py-1">
        <i class="bi bi-info-circle"></i> Sin usuarios asignados a este sistema.
      </p>
    {% endif %}
  </div>
</div>
{% else %}
<div class="text-center text-muted py-5">
  <i class="bi bi-inbox fs-1 d-block mb-3"></i>
  No hay sistemas registrados. <a href="{{ url_for('sistemas.nuevo') }}">Crear sistema</a>
</div>
{% endfor %}
{% endblock %}