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

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

{% block content %}

{# Simple modal #}
<div class="mb-4">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-1">
        Open simple modal
    </button>
</div>
<twig:block-modal
    id="modal-1"
    title="Modal Title"
    content="This is a basic modal with title and <a href='https://www.example.com/' target='_blank'>close button.</a>"
    :buttons="[
        {
            text: 'Close',
            type: 'secondary',
            dismiss: true
        },
        {
            text: 'Save Changes',
            type: 'primary'
        }
    ]"
/>

{# Complex modal #}
<div class="mt-2 mb-3">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-2">
        Open complex modal
    </button>
</div>
<twig:block-modal
    id="modal-2"
    title="Confirmation Required"
    content="<p>This action cannot be undone. Are you sure you want to continue?</p>"
    size="lg"
    :centered="true"
    :withBackdrop="true"
    :buttons="[
        {
            text: 'Cancel',
            type: 'light',
            dismiss: true
        },
        {
            text: 'Yes, continue',
            type: 'danger',
            attributes: 'onclick=\'handleConfirmation()\''
        }
    ]"
/>

{# Fullscreen modal with scrollable content #}
<div class="mt-3 mb-4">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-3">
        Open fullscreen modal with scrollable content
    </button>
</div>
<twig:block-modal
    id="modal-3"
    title="Terms and Conditions"
    content="<div style='height: 1000px'>Very long content...</div>"
    size="fullscreen"
    :scrollable="true"
    :buttons="[
        {
            text: 'Accept',
            type: 'success'
        }
    ]"
/>

{# Basic modal #}
<div class="mt-0">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-basic">
        Open basic modal
    </button>
</div>
<twig:block-modal
    id="modal-basic"
    title="Basic Modal"
    content="<p>This is a simple modal with title and close button.</p>"
    :buttons="[
        {
            text: 'Close',
            type: 'secondary',
            dismiss: true
        }
    ]"
/>

{# Modal without close button #}
<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 without X
    </button>
</div>
<twig:block-modal
    id="modal-no-close"
    title="You can't close me easily"
    content="<p>This modal doesn't have the X button to close.</p>"
    :showClose="false"
    :buttons="[
        {
            text: 'Got it',
            type: 'warning',
            dismiss: true
        }
    ]"
/>

{# Modal with 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 that does not close
    </button>
</div>
<twig:block-modal
    id="modal-static"
    title="You must make a decision"
    content="<p>This modal won't close when clicking outside. You must use one of the buttons.</p>"
    :withBackdrop="true"
    :buttons="[
        {
            text: 'Cancel',
            type: 'light',
            dismiss: true
        },
        {
            text: 'Accept',
            type: 'danger',
            dismiss: true
        }
    ]"
/>

{# Modal centered with small size #}
<div class="my-4">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-sm-centered">
        Modal SM centered
    </button>
</div>
<twig:block-modal
    id="modal-sm-centered"
    title="Small and Centered"
    content="<p>A small modal centered vertically.</p>"
    size="sm"
    :centered="true"
    :buttons="[
        {
            text: 'OK',
            type: 'info',
            dismiss: true
        }
    ]"
/>

{# Modal large with 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 large with scroll
    </button>
</div>
<twig:block-modal
    id="modal-lg-scroll"
    title="Terms and Conditions"
    content="<div>
        <h4>1. Introduction</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>"
    size="lg"
    :scrollable="true"
    :buttons="[
        {
            text: 'Reject',
            type: 'light',
            dismiss: true
        },
        {
            text: 'Accept Terms',
            type: 'success',
            dismiss: true
        }
    ]"
/>

{# Modal extra large with form #}
<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">
        Form in modal XL
    </button>
</div>
<twig:block-modal
    id="modal-xl-form"
    title="User Registration"
    content="<form id='userForm'>
        <div class='row'>
            <div class='col-md-6 mb-3'>
                <label for='firstName' class='form-label'>Name</label>
                <input type='text' class='form-control' id='firstName' required>
            </div>
        </div>
    </form>"
    size="xl"
    :centered="true"
    :buttons="[
        {
            text: 'Cancel',
            type: 'secondary',
            dismiss: true
        },
        {
            text: 'Register',
            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">
        View in full screen
    </button>
</div>
<twig:block-modal
    id="modal-fullscreen"
    title="Fullscreen Mode"
    content="<div class='text-center'>
        <h1 class='display-1'>👋</h1>
        <p class='lead'>This modal takes up the entire screen</p>
    </div>"
    size="fullscreen"
    :buttons="[
        {
            text: 'Exit',
            type: 'outline-primary',
            dismiss: true
        }
    ]"
/>

{# Modal without footer #}
<div class="my-4">
    <button type="button" class="btn btn-light d-block" data-bs-toggle="modal" data-bs-target="#modal-no-footer">
        Modal without footer
    </button>
</div>
<twig:block-modal
    id="modal-no-footer"
    title="Content Only"
    content="<p>This modal has no buttons in the footer, only the close button in the header.</p>"
/>

{% endblock %}