{% extends "base.html" %}
{% block title %}Sistemas{% 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-hdd-network text-primary"></i> Sistemas de la Organización</h2>
  <a href="{{ url_for('sistemas.nuevo') }}" class="btn btn-primary">
    <i class="bi bi-plus-circle"></i> Nuevo Sistema
  </a>
</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>Nombre</th>
            <th>Descripción</th>
            <th class="text-center">Estado</th>
            <th class="text-center">Acciones</th>
          </tr>
        </thead>
        <tbody>
          {% for s in sistemas.items %}
          <tr class="{{ '' if s.activo else 'table-secondary text-muted' }}">
            <td>{{ s.id }}</td>
            <td class="fw-semibold">{{ s.nombre }}</td>
            <td>{{ (s.descripcion or '-')[:80] }}{{ '…' if s.descripcion and s.descripcion|length > 80 else '' }}</td>
            <td class="text-center">
              {% if s.activo %}
                <span class="badge bg-success"><i class="bi bi-check-circle"></i> Activo</span>
              {% else %}
                <span class="badge bg-secondary"><i class="bi bi-x-circle"></i> Inactivo</span>
              {% endif %}
            </td>
            <td class="text-center">
              <a href="{{ url_for('sistemas.editar', id=s.id) }}"
                 class="btn btn-sm btn-outline-primary me-1" title="Editar">
                <i class="bi bi-pencil"></i>
              </a>
              <form method="POST" action="{{ url_for('sistemas.toggle_activo', id=s.id) }}"
                    class="d-inline" onsubmit="return confirm('¿Cambiar estado del sistema?')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit"
                        class="btn btn-sm {{ 'btn-outline-warning' if s.activo else 'btn-outline-success' }}"
                        title="{{ 'Desactivar' if s.activo else 'Activar' }}">
                  <i class="bi {{ 'bi-toggle-on' if s.activo else 'bi-toggle-off' }}"></i>
                </button>
              </form>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="5" class="text-center text-muted py-4">
              <i class="bi bi-inbox fs-3 d-block mb-2"></i>No hay sistemas registrados.
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

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