{% extends "nbapp_base.html" %}
{% block content %}
<meta charset="UTF-8">
<!-- Bloque de Comando de Generación -->
<section class="max-w-3xl mx-auto bg-gray-50 rounded-2xl shadow-md p-6 space-y-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-4 text-center">Comando de generación</h2>
    <form method="POST" class="mt-4 flex flex-col gap-4">
        <input type="text" id="comando" name="comando" placeholder="nro_plantilla;parámetros..." required
            class="rounded-xl border border-gray-300 bg-gray-100 p-4 text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-300" />

        <!-- Botón en línea separada -->
        <button
            class="block mx-auto mt-2 bg-gray-700 hover:bg-gray-800 text-white font-bold py-1 px-4 rounded-lg shadow"
            type="submit">
            Generar
        </button>
    </form>
</section>

<!-- Bloque de Plantillas Disponibles -->
<section class="max-w-3xl mx-auto bg-gray-50 rounded-2xl shadow-md p-6 space-y-2">
    <h2 class="text-2xl font-bold text-gray-800 mb-4 text-center">Plantillas disponibles</h2>

    <!-- Detalle plantilla -->
    <details class="rounded-lg border border-gray-200 p-4 bg-white">
        <summary class="cursor-pointer font-medium text-gray-800">01 - Numeración de Poder</summary>
        <div class="grid grid-cols-[auto_1fr] gap-2 mt-3 text-sm">
            <div class="font-medium text-gray-700">Comando:</div>
            <div class="italic text-gray-600">01;InicialesAbogado;CodigoPropietario</div>
            <div class="font-medium text-gray-700">Ejemplo:</div>
            <div class="text-gray-800">01;GL;20905-0</div>
        </div>
    </details>

    <details class="rounded-lg border border-gray-200 p-4 bg-white">
        <summary class="cursor-pointer font-medium text-gray-800">02 - Notificación de Ingreso de Poder</summary>
        <div class="grid grid-cols-[auto_1fr] gap-2 mt-3 text-sm">
            <div class="font-medium text-gray-700">Comando:</div>
            <div class="italic text-gray-600">02;InicialesAbogado;NroSolicitud;NroPoder</div>
            <div class="font-medium text-gray-700">Ejemplo:</div>
            <div class="text-gray-800">02;GL;2025-004914;2025-001152</div>
        </div>
    </details>

    <details class="rounded-lg border border-gray-200 p-4 bg-white">
        <summary class="cursor-pointer font-medium text-gray-800">03 - Documento de Prioridad Extranjera</summary>
        <div class="grid grid-cols-[auto_1fr] gap-2 mt-3 text-sm">
            <div class="font-medium text-gray-700">Comando:</div>
            <div class="italic text-gray-600">03;InicialesAbogado;NroSolicitud;NroPoder</div>
            <div class="font-medium text-gray-700">Ejemplo:</div>
            <div class="text-gray-800">03;RO;2025-005306;2016-000483</div>
        </div>
    </details>

    <details class="rounded-lg border border-gray-200 p-4 bg-white">
        <summary class="cursor-pointer font-medium text-gray-800">04 - Summary Sheet Trademark Registration</summary>
        <div class="grid grid-cols-[auto_1fr] gap-2 mt-3 text-sm">
            <div class="font-medium text-gray-700">Comando:</div>
            <div class="italic text-gray-600">04;NroSolicitud</div>
            <div class="font-medium text-gray-700">Ejemplo 1:</div>
            <div class="text-gray-800">04;2013-007269</div>
            <div class="font-medium text-gray-700">Ejemplo 2 (con logo):</div>
            <div class="text-gray-800">04;2024-003660</div>
            <div class="font-medium text-gray-700">Ejemplo 3 (con prioridad):</div>
            <div class="text-gray-800">04;2023-011304</div>
        </div>
    </details>

    <!-- Abreviaciones -->
    <p class="mt-6 text-sm text-gray-700">
        <strong class="font-semibold">Iniciales Abogado</strong>:
        <abbr title="Annette Angulo" class="underline cursor-help">AA</abbr>,
        <abbr title="Guillermo López" class="underline cursor-help">GL</abbr>,
        <abbr title="Hillmer Vallenilla" class="underline cursor-help">HV</abbr>,
        <abbr title="Luis Henriquez" class="underline cursor-help">LH</abbr>,
        <abbr title="María Auxiliadora Jurado" class="underline cursor-help">MJ</abbr>,
        <abbr title="Manuel Polanco" class="underline cursor-help">MP</abbr>,
        <abbr title="Rafael Ortín" class="underline cursor-help">RO</abbr>
    </p>
</section>
{% endblock %}