{% extends 'base.html.twig' %}
{% block title %}{{ action == 'create' ? 'Nuevo Pais' : 'Editar Pais' }}{% endblock %}

{% block body %}
  {# Page Header #}
  <div class="flex items-center justify-between mb-6">
    <div>
      <h1 class="text-2xl font-bold text-secondary-900">{{ action == 'create' ? 'Nuevo Pais' : 'Editar Pais' }}</h1>
      <p class="mt-1 text-sm text-secondary-600">{{ action == 'create' ? 'Agregar un nuevo pais al catilogo' : 'Modificar informacion del pais' }}</p>
    </div>
    <a href="{{ path('pais_index') }}" class="btn btn-outline-secondary">
      <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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
      </svg>
      Volver
    </a>
  </div>

  {% set d = data ?? {} %}
  <form method="post" action="{{ action == 'create' ? path('pais_create') : path('pais_update', {id: d.id}) }}">
    <div class="card">
      <div class="card-header">
        <h3 class="text-lg font-medium text-secondary-900">Informacion del Pais</h3>
      </div>
      <div class="card-body">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {# Cidigo ISO-3 #}
          <div>
            <label for="codigo" class="form-label">Cidigo ISO-3 <span class="text-red-500">*</span></label>
            <input
              type="text"
              id="codigo"
              name="codigo"
              class="form-control {% if errors.codigo is defined %}border-red-500{% endif %}"
              required
              maxlength="3"
              placeholder="GTM"
              value="{{ old.codigo ?? d.codigo ?? '' }}"
              style="text-transform: uppercase;"
            >
            {% if errors.codigo is defined %}
              <p class="mt-1 text-sm text-red-600">{{ errors.codigo }}</p>
            {% else %}
              <p class="mt-1 text-xs text-secondary-500">Cidigo ISO 3166-1 alpha-3</p>
            {% endif %}
          </div>

          {# Cidigo ISO-2 #}
          <div>
            <label for="codigo_iso2" class="form-label">Cidigo ISO-2</label>
            <input
              type="text"
              id="codigo_iso2"
              name="codigo_iso2"
              class="form-control"
              maxlength="2"
              placeholder="GT"
              value="{{ old.codigo_iso2 ?? d.codigo_iso2 ?? '' }}"
              style="text-transform: uppercase;"
            >
            <p class="mt-1 text-xs text-secondary-500">Cidigo ISO 3166-1 alpha-2</p>
          </div>

          {# Nombre #}
          <div class="md:col-span-2">
            <label for="nombre" class="form-label">Nombre <span class="text-red-500">*</span></label>
            <input
              type="text"
              id="nombre"
              name="nombre"
              class="form-control {% if errors.nombre is defined %}border-red-500{% endif %}"
              required
              maxlength="100"
              placeholder="Guatemala"
              value="{{ old.nombre ?? d.nombre ?? '' }}"
            >
            {% if errors.nombre is defined %}
              <p class="mt-1 text-sm text-red-600">{{ errors.nombre }}</p>
            {% endif %}
          </div>

          {# Estado #}
          <div class="md:col-span-2 lg:col-span-4">
            <label class="flex items-center cursor-pointer">
              <input
                type="checkbox"
                name="activo"
                value="1"
                class="w-4 h-4 text-primary-600 border-secondary-300 rounded focus:ring-primary-500"
                {{ (old.activo ?? d.activo ?? true) ? 'checked' : '' }}
              >
              <span class="ml-2 text-sm font-medium text-secondary-700">Pais activo</span>
            </label>
            <p class="mt-1 text-xs text-secondary-500">Los paises inactivos no aparecerin en las listas de seleccion</p>
          </div>
        </div>
      </div>
      <div class="card-footer flex justify-end gap-3">
        <a href="{{ path('pais_index') }}" class="btn btn-outline-secondary">Cancelar</a>
        <button type="submit" 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="M5 13l4 4L19 7"/>
          </svg>
          {{ action == 'create' ? 'Crear Pais' : 'Guardar Cambios' }}
        </button>
      </div>
    </div>
  </form>
{% endblock %}