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

{% block title %}{{ 'menu.catalogos.monedas'|trans }}{% endblock %}
{% block page_title %}{{ 'menu.catalogos.monedas'|trans }}{% 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">{{ 'menu.catalogos.monedas'|trans }}</h1>
      <p class="mt-1 text-sm text-secondary-600">{{ 'Gestión de monedas disponibles para documentos y pagos'|trans }}</p>
    </div>
    <div class="mt-4 sm:mt-0">
      {% if is_granted('ROLE_OPERADOR') %}
        <a href="{{ path('moneda_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>
          {{ 'button.new'|trans }} {{ 'menu.catalogos.monedas'|trans }}
        </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">{{ 'form.search'|trans }}</label>
          <input
            type="text"
            name="q"
            value="{{ f.q }}"
            placeholder="{{ 'Código o nombre'|trans }}"
            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>
            {{ 'button.filter'|trans }}
          </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 Monedas'|trans }}</h3>
        <p class="mt-1 text-sm text-secondary-500">{{ items|length }} {{ 'registros encontrados'|trans }}</p>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table class="table">
        <thead>
          <tr>
            <th class="table-th w-32">{{ 'label.code'|trans }}</th>
            <th class="table-th">{{ 'label.name'|trans }}</th>
            <th class="table-th w-32">{{ 'Símbolo'|trans }}</th>
            <th class="table-th w-40 text-right">{{ 'label.actions'|trans }}</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 font-medium text-secondary-900">{{ it.nombre }}</td>
              <td class="px-6 py-4 text-secondary-600">{{ it.simbolo }}</td>
              <td class="px-6 py-4">
                <div class="flex items-center justify-end gap-2">
                  {% if is_granted('ROLE_OPERADOR') %}
                    <a href="{{ path('moneda_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>
                      {{ 'button.edit'|trans }}
                    </a>
                    <form method="post" action="{{ path('moneda_delete', {id: it.id}) }}" onsubmit="return confirm('{{ 'message.confirm_delete'|trans }}');" 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>
                        {{ 'button.delete'|trans }}
                      </button>
                    </form>
                  {% endif %}
                </div>
              </td>
            </tr>
          {% else %}
            <tr>
              <td colspan="4" 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                </svg>
                <p class="mt-2 text-sm text-secondary-600">{{ 'table.no_data'|trans }}</p>
                <p class="mt-1 text-xs text-secondary-500">{{ 'Intenta ajustar tus filtros de búsqueda'|trans }}</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'|trans }} <span class="font-medium">{{ (page-1)*limit + 1 }}</span> {{ 'a'|trans }} <span class="font-medium">{{ min(page*limit, total) }}</span> {{ 'de'|trans }} <span class="font-medium">{{ total }}</span> {{ 'registros'|trans }}
          </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 %}