{# derafu_twig:templates/pages/components/block-modal.html.twig #}

{% extends 'layouts/default.html.twig' %}

{% block content %}
{# Modal simple #}
<div class="mb-4">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-1">
        Abrir Modal Simple
    </button>
</div>
<twig:block-modal
    id="modal-1"
    title="Título del Modal"
    content="<p>Este es un modal básico con título y botón de cerrar. <a href=https://derafu.org/>Link</a></p>"
    :buttons="[
        {
            text: 'Cerrar',
            type: 'secondary',
            dismiss: true
        },
        {
            text: 'Guardar Cambios',
            type: 'primary'
        }
    ]"
/>

{# Modal más complejo #}
<div class="mt-2 mb-3">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-2">
        Abrir Modal Complejo
    </button>
</div>
<twig:block-modal
    id="modal-2"
    title="Confirmación Requerida"
    content="<p>Esta acción no se puede deshacer. ¿Estás seguro de que deseas continuar?</p>"
    size="lg"
    centered="true"
    staticBackdrop="true"
    :buttons="[
        {
            text: 'Cancelar',
            type: 'light',
            dismiss: true
        },
        {
            text: 'Sí, continuar',
            type: 'danger',
            attributes: 'onclick=\'handleConfirmation()\''
        }
    ]"
/>

{# Modal fullscreen con contenido scrollable #}
<div class="mt-3 mb-4">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-3">
        Abrir Modal fullscreen con contenido scrollable
    </button>
</div>
<twig:block-modal
    id="modal-3"
    title="Términos y Condiciones"
    content="<div style='height: 1000px'>Contenido muy largo...</div>"
    size="fullscreen"
    scrollable="true"
    :buttons="[
        {
            text: 'Aceptar',
            type: 'success'
        }
    ]"
/>

{# Modal básico #}
<div class="mt-0">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-basic">
        Abrir Modal Básico
    </button>
</div>
<twig:block-modal
    id="modal-basic"
    title="Modal Básico"
    content="<p>Este es un modal simple con título y botón de cerrar.</p>"
    :buttons="[
        {
            text: 'Cerrar',
            type: 'secondary',
            dismiss: true
        }
    ]"
/>

{# Modal sin botón de cerrar #}
<div class="mt-2 mb-2">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-no-close">
        Modal sin X
    </button>
</div>
<twig:block-modal
    id="modal-no-close"
    title="No puedes cerrarme fácilmente"
    content="<p>Este modal no tiene el botón X para cerrar.</p>"
    :showClose="false"
    :buttons="[
        {
            text: 'Entendido',
            type: 'warning',
            dismiss: true
        }
    ]"
/>

{# Modal Static Backdrop #}
<div class="mt-3 mb-4">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-static">
        Modal que no se Cierra
    </button>
</div>
<twig:block-modal
    id="modal-static"
    title="Debes tomar una decisión"
    content="<p>Este modal no se cerrará al hacer clic fuera de él. Debes usar uno de los botones.</p>"
    staticBackdrop="true"
    :buttons="[
        {
            text: 'Cancelar',
            type: 'light',
            dismiss: true
        },
        {
            text: 'Aceptar',
            type: 'danger',
            dismiss: true
        }
    ]"
/>

{# Modal Centrado con Tamaño Small #}
<div class="mt-2">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-sm-centered">
        Modal SM Centrado
    </button>
</div>
<twig:block-modal
    id="modal-sm-centered"
    title="Pequeño y Centrado"
    content="<p>Un modal pequeño y centrado verticalmente.</p>"
    size="sm"
    centered="true"
    :buttons="[
        {
            text: 'OK',
            type: 'info',
            dismiss: true
        }
    ]"
/>

{# Modal Grande con Scroll #}
<div class="mt-3 mb-4">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-lg-scroll">
        Modal Grande con Scroll
    </button>
</div>
<twig:block-modal
    id="modal-lg-scroll"
    title="Términos y Condiciones"
    content="<div>
        <h4>1. Introducción</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>"
    size="lg"
    scrollable="true"
    :buttons="[
        {
            text: 'Rechazar',
            type: 'light',
            dismiss: true
        },
        {
            text: 'Aceptar Términos',
            type: 'success',
            dismiss: true
        }
    ]"
/>

{# Modal Extra Large con Formulario #}
<div class="mt-2 mb-3">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-xl-form">
        Formulario en Modal XL
    </button>
</div>
<twig:block-modal
    id="modal-xl-form"
    title="Registro de Usuario"
    content="<form id='userForm'>
        <div class='row'>
            <div class='col-md-6 mb-3'>
                <label for='firstName' class='form-label'>Nombre</label>
                <input type='text' class='form-control' id='firstName' required>
            </div>
        </div>
    </form>"
    size="xl"
    centered="true"
    :buttons="[
        {
            text: 'Cancelar',
            type: 'secondary',
            dismiss: true
        },
        {
            text: 'Registrar',
            type: 'dark',
            attributes: 'onclick=&quot;document.getElementById(\'userForm\').submit()&quot;'
        }
    ]"
/>

{# Modal Fullscreen #}
<div class="mt-3 mb-4">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-fullscreen">
        Ver en Pantalla Completa
    </button>
</div>
<twig:block-modal
    id="modal-fullscreen"
    title="Modo Pantalla Completa"
    content="<div class='text-center'>
        <h1 class='display-1'>👋</h1>
        <p class='lead'>Este modal ocupa toda la pantalla</p>
    </div>"
    size="fullscreen"
    :buttons="[
        {
            text: 'Salir',
            type: 'outline-primary',
            dismiss: true
        }
    ]"
/>

{# Modal sin Footer #}
<div class="mt-2">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-no-footer">
        Modal sin Footer
    </button>
</div>
<twig:block-modal
    id="modal-no-footer"
    title="Solo Contenido"
    content="<p>Este modal no tiene botones en el footer, solo el botón de cerrar en el header.</p>"
/>
{% endblock %}