{% extends 'base.html.twig' %}

{% block title %}Paises{% endblock %}
{% block page_title %}Paises{% endblock %}

{% block body %}
  {# Page Header #}
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
    <div>
      <h1 class="text-2xl font-bold text-secondary-900">Catilogo de Paises</h1>
      <p class="mt-1 text-sm text-secondary-600">Gestion de paises disponibles para proveedores</p>
    </div>
    <div class="mt-4 sm:mt-0">
      {% if is_granted('ROLE_OPERADOR') %}
        <a href="{{ path('pais_new') }}" class="btn btn-primary">
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
          </svg>
          Nuevo Pais
        </a>
      {% endif %}
    </div>
  </div>

  {# Search & Filter Card #}
  <div class="card mb-6">
    <div class="card-body">
      <form method="get" class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="md:col-span-3">
          <label class="form-label">Buscar</label>
          <input
            type="text"
            name="q"
            value="{{ f.q }}"
            placeholder="Cidigo o nombre del pais"
            class="form-control"
          >
        </div>
        <div class="flex items-end">
          <button type="submit" class="btn btn-primary w-full">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
            </svg>
            Filtrar
          </button>
        </div>
      </form>
    </div>
  </div>

  {# Table Card #}
  <div class="card">
    <div class="card-header flex items-center justify-between">
      <div>
        <h3 class="text-lg font-medium text-secondary-900">Listado de Paises</h3>
        <p class="mt-1 text-sm text-secondary-500">{{ total }} registros encontrados</p>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table class="table">
        <thead>
          <tr>
            <th class="table-th w-24">Cidigo</th>
            <th class="table-th w-24">ISO-2</th>
            <th class="table-th">Nombre</th>
            <th class="table-th w-24">Estado</th>
            <th class="table-th w-40 text-right">Acciones</th>
          </tr>
        </thead>
        <tbody>
          {% for it in items %}
            <tr class="hover:bg-primary-50/30 transition-colors">
              <td class="px-6 py-4">
                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary-100 text-primary-800">
                  {{ it.codigo }}
                </span>
              </td>
              <td class="px-6 py-4 text-secondary-600">{{ it.codigoIso2 ?? '-' }}</td>
              <td class="px-6 py-4 font-medium text-secondary-900">{{ it.nombre }}</td>
              <td class="px-6 py-4">
                {% if it.activo %}
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                    Activo
                  </span>
                {% else %}
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                    Inactivo
                  </span>
                {% endif %}
              </td>
              <td class="px-6 py-4">
                <div class="flex items-center justify-end gap-2">
                  {% if is_granted('ROLE_OPERADOR') %}
                    <a href="{{ path('pais_edit', {id: it.id}) }}" class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-primary-700 bg-primary-50 rounded-lg hover:bg-primary-100 transition-colors">
                      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                      </svg>
                      Editar
                    </a>
                    <form method="post" action="{{ path('pais_delete', {id: it.id}) }}" onsubmit="return confirm('iEsti seguro de eliminar este pais?');" class="inline">
                      <button type="submit" class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-red-700 bg-red-50 rounded-lg hover:bg-red-100 transition-colors">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                        </svg>
                        Eliminar
                      </button>
                    </form>
                  {% endif %}
                </div>
              </td>
            </tr>
          {% else %}
            <tr>
              <td colspan="5" class="px-6 py-12 text-center">
                <svg class="mx-auto h-12 w-12 text-secondary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <p class="mt-2 text-sm text-secondary-600">No hay paises registrados</p>
                <p class="mt-1 text-xs text-secondary-500">Agrega un nuevo pais para comenzar</p>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {# Pagination #}
    {% if pages > 1 %}
      <div class="card-footer">
        <nav class="flex items-center justify-between">
          <div class="text-sm text-secondary-700">
            Mostrando <span class="font-medium">{{ (page-1)*limit + 1 }}</span> a <span class="font-medium">{{ min(page*limit, total) }}</span> de <span class="font-medium">{{ total }}</span> registros
          </div>
          <ul class="pagination">
            {% for p in 1..pages %}
              <li class="page-item {% if p == page %}active{% endif %}">
                <a class="page-link" href="{{ path(app.request.attributes.get('_route'), app.request.query.all | merge({'page': p})) }}">
                  {{ p }}
                </a>
              </li>
            {% endfor %}
          </ul>
        </nav>
      </div>
    {% endif %}
  </div>
{% endblock %}