<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Modals')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Base UI', 'title' => 'Modals')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Base UI', 'title' => 'Modals')) ?>

                    <div class="container">
<div class="grid grid-cols-1 gap-base">
<div class="card">
<div class="card-header">
<h4 class="card-title">Modals</h4>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">A rendered modal with header, body, and set of actions in the footer.</p>
<div class="flex flex-wrap gap-2.5">
<!-- Standard modal content -->
<div>
<button aria-controls="standard-modal" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary hover:bg-primary-hover rounded text-white" data-hs-overlay="#standard-modal" type="button">Standard Modal</button>
<div aria-labelledby="standard-modal-label" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto opacity-0 transition-all" id="standard-modal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target m-3 sm:mx-auto sm:w-full sm:max-w-lg">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="standard-modal-label">Modal Heading</h3>
<button aria-label=" Close" data-hs-overlay="#standard-modal" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="overflow-y-auto card-body">
<h5 class="mb-2">Text in a modal</h5>
<p class="mb-4">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<hr class="border-default-300 my-4"/>
<h5 class="mb-2">Overflowing text to show scroll behavior</h5>
<p class="mb-4">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p class="mb-4">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-light hover:text-primary m-1" data-hs-overlay="#standard-modal" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!--  Modal content for the Large example -->
<div>
<button aria-controls="bs-example-modal-lg" aria-expanded="false" aria-haspopup="dialog" class="btn bg-info hover:bg-info-500 rounded text-white" data-hs-overlay="#bs-example-modal-lg" type="button">Large Modal</button>
<div aria-labelledby="bs-example-modal-lg-label" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto opacity-0 transition-all" id="bs-example-modal-lg" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target m-3 sm:mx-auto lg:w-full lg:max-w-3xl">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="bs-example-modal-lg-label">Large modal</h3>
<button aria-label=" Close" data-hs-overlay="#bs-example-modal-lg" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="overflow-y-auto card-body">...</div>
</div>
</div>
</div>
</div>
<!--  Modal content for the Small example -->
<div>
<button aria-controls="bs-example-modal-sm" aria-expanded="false" aria-haspopup="dialog" class="btn bg-success rounded text-white hover:bg-emerald-500" data-hs-overlay="#bs-example-modal-sm" type="button">Small Modal</button>
<div aria-labelledby="bs-example-modal-sm-label" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto opacity-0 transition-all" id="bs-example-modal-sm" role="dialog" tabindex="-1">
<div class="m-3 sm:mx-auto lg:w-full lg:max-w-xs">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="bs-example-modal-sm-label">Small modal</h3>
<button aria-label=" Close" data-hs-overlay="#bs-example-modal-sm" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="overflow-y-auto card-body">...</div>
</div>
</div>
</div>
</div>
<!-- Full width modal content -->
<div>
<button aria-controls="full-width-modal" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary hover:bg-primary-hover rounded text-white" data-hs-overlay="#full-width-modal" type="button">Full width Modal</button>
<div aria-labelledby="full-width-modal-label" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto opacity-0 transition-all" id="full-width-modal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target m-3 sm:mx-auto lg:w-full lg:max-w-full">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="full-width-modal-label">Modal Heading</h3>
<button aria-label=" Close" data-hs-overlay="#full-width-modal" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="overflow-y-auto card-body">
<h5 class="mb-2">Text in a modal</h5>
<p class="mb-4">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<hr class="border-default-300 my-4"/>
<h5 class="mb-2">Overflowing text to show scroll behavior</h5>
<p class="mb-4">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p class="mb-4">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-light hover:text-primary m-1" data-hs-overlay="#full-width-modal" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Long Content Scroll Modal -->
<div>
<button aria-controls="scrollable-modal" aria-expanded="false" aria-haspopup="dialog" class="btn bg-secondary hover:bg-secondary-hover rounded text-white" data-hs-overlay="#scrollable-modal" type="button">Scrollable Modal</button>
<div aria-labelledby="scrollable-modal-label" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto opacity-0 transition-all" id="scrollable-modal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target m-3 sm:mx-auto sm:w-full sm:max-w-lg">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="scrollable-modal-label">Modal Heading</h3>
<button aria-label=" Close" data-hs-overlay="#scrollable-modal" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="h-150 overflow-y-auto p-5">
<p class="mb-4">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p class="mb-4">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p class="mb-4">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="mb-4">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p class="mb-4">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p class="mb-4">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="mb-4">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p class="mb-4">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p class="mb-4">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="mb-4">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p class="mb-4">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p class="mb-4">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="mb-4">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p class="mb-4">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p class="mb-4">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="mb-4">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p class="mb-4">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-secondary hover:bg-secondary-hover m-1 rounded text-white" data-hs-overlay="#scrollable-modal" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Modal Position</h4>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Specify the position for the modal. You can display modal at top, bottom, or center of page.</p>
<div class="flex flex-wrap gap-2.5">
<!-- Top modal content -->
<div>
<button aria-controls="top-modal" aria-expanded="false" aria-haspopup="dialog" class="btn bg-secondary hover:bg-secondary-hover rounded text-white" data-hs-overlay="#top-modal" type="button">Top Modal</button>
<div aria-labelledby="top-modal-label" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto opacity-0 transition-all" id="top-modal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target m-3 sm:mx-auto sm:w-full sm:max-w-lg">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="top-modal-label">Modal Heading</h3>
<button aria-label=" Close" data-hs-overlay="#top-modal" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="overflow-y-auto card-body">
<h5 class="mb-2">Text in a modal</h5>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-light hover:text-primary m-1" data-hs-overlay="#top-modal" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom modal content -->
<div>
<button aria-controls="bottom-modal" aria-expanded="false" aria-haspopup="dialog" class="btn bg-secondary hover:bg-secondary-hover rounded text-white" data-hs-overlay="#bottom-modal" type="button">Bottom Modal</button>
<div aria-labelledby="bottom-modal-label" class="hs-overlay pointer-events-none fixed start-0 bottom-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="bottom-modal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target m-3 flex min-h-[calc(100%-56px)] items-end sm:mx-auto sm:w-full sm:max-w-lg">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="bottom-modal-label">Modal Heading</h3>
<button aria-label=" Close" data-hs-overlay="#bottom-modal" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="overflow-y-auto card-body">
<h5 class="mb-2">Text in a modal</h5>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-light hover:text-primary m-1" data-hs-overlay="#bottom-modal" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Center modal content -->
<div>
<button aria-controls="centermodal" aria-expanded="false" aria-haspopup="dialog" class="btn bg-secondary hover:bg-secondary-hover rounded text-white" data-hs-overlay="#centermodal" type="button">Center modal</button>
<div aria-labelledby="centermodal-label" class="hs-overlay pointer-events-none fixed start-0 bottom-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="centermodal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target m-3 flex min-h-[calc(100%-56px)] items-center sm:mx-auto sm:w-full sm:max-w-lg">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="centermodal-label">Modal Heading</h3>
<button aria-label=" Close" data-hs-overlay="#centermodal" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="overflow-y-auto card-body">
<h5 class="mb-2">Text in a modal</h5>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-light hover:text-primary m-1" data-hs-overlay="#centermodal" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Multiple Modal</h4>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Display a series of modals one by one to guide your users on multiple aspects or take step wise input.</p>
<div class="flex flex-wrap gap-2.5">
<!-- Modal Heading -->
<div>
<button aria-controls="multiple-one" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary hover:bg-primary-hover rounded text-white" data-hs-overlay="#multiple-one" type="button">Multiple Modal</button>
<div aria-labelledby="multiple-one-label" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto opacity-0 transition-all" id="multiple-one" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target m-3 sm:mx-auto sm:w-full sm:max-w-lg">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="multiple-one-label">Modal Heading</h3>
<button aria-label=" Close" data-hs-overlay="#multiple-one" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="overflow-y-auto card-body">
<h5 class="mb-2">Text in a modal</h5>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button aria-controls="multiple-two" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary hover:bg-primary-hover rounded text-white" data-hs-overlay="#multiple-two" type="button">Next</button>
</div>
</div>
</div>
</div>
<div aria-labelledby="multiple-two-label" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto opacity-0 transition-all" id="multiple-two" role="dialog" tabindex="-1">
<div class="m-3 sm:mx-auto sm:w-full sm:max-w-lg">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="multiple-two-label">Modal Heading</h3>
<button aria-label=" Close" data-hs-overlay="#multiple-two" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="overflow-y-auto card-body">
<h5 class="mb-2">Text in a modal</h5>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" data-hs-overlay="#multiple-two" type="button">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Toggle Between Modals</h4>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                        Toggle between multiple modals with some clever placement of the
                                        <code>data-hs-overlay</code> attributes.
                                    </p>
<div class="flex flex-wrap gap-2.5">
<div>
<button aria-controls="exampleModalToggle1" aria-expanded="false" aria-haspopup="dialog" class="btn bg-secondary hover:bg-secondary-hover rounded text-white" data-hs-overlay="#exampleModalToggle1" type="button">Open first modal</button>
<div aria-labelledby="exampleModalToggle1-label" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto opacity-0 transition-all" id="exampleModalToggle1" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target m-3 flex min-h-[calc(100%-56px)] items-center sm:mx-auto sm:w-full sm:max-w-lg">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="exampleModalToggle1-label">Modal 1</h3>
<button aria-label=" Close" data-hs-overlay="#exampleModalToggle1" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="overflow-y-auto card-body">
<p>Show a second modal and hide this one with the button below.</p>
</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button aria-controls="exampleModalToggle2" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary hover:bg-primary-hover rounded text-white" data-hs-overlay="#exampleModalToggle2" type="button">
                                                                Open second modal
                                                            </button>
</div>
</div>
</div>
</div>
<div aria-labelledby="exampleModalToggle2-label" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto opacity-0 transition-all" id="exampleModalToggle2" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target m-3 flex min-h-[calc(100%-56px)] items-center sm:mx-auto sm:w-full sm:max-w-lg">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="exampleModalToggle2-label">Modal 2</h3>
<button aria-label=" Close" data-hs-overlay="#exampleModalToggle2" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="overflow-y-auto card-body">
<p>Hide this modal and show the first with the button below.</p>
</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" data-hs-overlay="#exampleModalToggle1" type="button">Back to first</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Fullscreen Modal</h4>
</div>
<div class="card-body">
<p class="text-defa mb-4">Another override is the option to pop up a modal that covers the user viewport.</p>
<div class="flex flex-wrap gap-2.5">
<!-- Full Screen Modal -->
<div>
<button aria-controls="fullscreeexampleModal" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary hover:bg-primary-hover rounded text-white" data-hs-overlay="#fullscreeexampleModal" type="button">Fullscreen Modal</button>
<div aria-labelledby="fullscreeexampleModal-label" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto opacity-0 transition-all" id="fullscreeexampleModal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target m-3 h-full max-h-full sm:mx-auto sm:w-full sm:max-w-full">
<div class="border-default-300 pointer-events-auto flex h-full max-h-full max-w-full flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="fullscreeexampleModal-label">Full Screen Modal</h3>
<button aria-label=" Close" data-hs-overlay="#fullscreeexampleModal" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="h-full overflow-y-auto p-5">...</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-light hover:text-primary m-1" data-hs-overlay="#fullscreeexampleModal" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Full screen below sm -->
<div>
<button aria-controls="exampleModalFullscreenSm" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary hover:bg-primary-hover rounded text-white" data-hs-overlay="#exampleModalFullscreenSm" type="button">
                                                Full Screen Below sm
                                            </button>
<div aria-labelledby="exampleModalFullscreenSm-label" class="hs-overlay pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="exampleModalFullscreenSm" role="dialog" tabindex="-1">
<div class="hs-overlay-open:mt-0 hs-overlay-animation-target hs-overlay-open:opacity-100 hs-overlay-open:duration-500 sm:hs-overlay-open:mt-10 mt-10 h-full max-h-full max-w-full opacity-0 transition-all sm:mx-auto sm:mt-0 sm:h-auto sm:max-h-none sm:max-w-lg">
<div class="border-default-300 pointer-events-auto flex h-full max-h-full max-w-full flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="exampleModalFullscreenSm-label">Full screen below sm</h3>
<button aria-label="Close" data-hs-overlay="exampleModalFullscreenSm" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="h-full overflow-y-auto p-5">...</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-light hover:text-primary m-1" data-hs-overlay="#exampleModalFullscreenSm" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Full screen below md -->
<div>
<button aria-controls="exampleModalFullscreenMd" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary hover:bg-primary-hover rounded text-white" data-hs-overlay="#exampleModalFullscreenMd" type="button">
                                                Full Screen Below md
                                            </button>
<div aria-labelledby="exampleModalFullscreenMd-label" class="hs-overlay pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="exampleModalFullscreenMd" role="dialog" tabindex="-1">
<div class="hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 md:hs-overlay-open:mt-10 mt-10 h-full max-h-full max-w-full opacity-0 transition-all md:mx-auto md:mt-0 md:h-auto md:max-h-none md:max-w-lg">
<div class="border-default-300 md: pointer-events-auto flex h-full max-h-full max-w-full flex-col card md:h-auto md:max-h-none md:max-w-lg md:rounded-xl md:border md:shadow-2xs">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="exampleModalFullscreenMd-label">Full Screen Below md</h3>
<button aria-label="Close" data-hs-overlay="exampleModalFullscreenMd" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="h-full overflow-y-auto p-5">...</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-light hover:text-primary m-1" data-hs-overlay="#exampleModalFullscreenMd" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Full screen below lg -->
<div>
<button aria-controls="exampleModalFullscreenLg" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary hover:bg-primary-hover rounded text-white" data-hs-overlay="#exampleModalFullscreenLg" type="button">
                                                Full Screen Below lg
                                            </button>
<div aria-labelledby="exampleModalFullscreenLg-label" class="hs-overlay pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="exampleModalFullscreenLg" role="dialog" tabindex="-1">
<div class="hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 lg:hs-overlay-open:mt-10 mt-10 h-full max-h-full max-w-full opacity-0 transition-all lg:mx-auto lg:mt-0 lg:h-auto lg:max-h-none lg:max-w-lg">
<div class="border-default-300 lg: pointer-events-auto flex h-full max-h-full max-w-full flex-col card lg:h-auto lg:max-h-none lg:max-w-lg lg:rounded-xl lg:border lg:shadow-2xs">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="exampleModalFullscreenLg-label">Full Screen Below lg</h3>
<button aria-label="Close" data-hs-overlay="exampleModalFullscreenLg" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="h-full overflow-y-auto p-5">...</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-light hover:text-primary m-1" data-hs-overlay="#exampleModalFullscreenLg" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Full screen below xl -->
<div>
<button aria-controls="exampleModalFullscreenXl" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary hover:bg-primary-hover rounded text-white" data-hs-overlay="#exampleModalFullscreenXl" type="button">
                                                Full Screen Below xl
                                            </button>
<div aria-labelledby="exampleModalFullscreenXl-label" class="hs-overlay pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="exampleModalFullscreenXl" role="dialog" tabindex="-1">
<div class="hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 xl:hs-overlay-open:mt-10 mt-10 h-full max-h-full max-w-full opacity-0 transition-all xl:mx-auto xl:mt-0 xl:h-auto xl:max-h-none xl:max-w-xl">
<div class="xl: border-default-300 pointer-events-auto flex h-full max-h-full max-w-full flex-col card xl:h-auto xl:max-h-none xl:max-w-lg xl:rounded-xl xl:border xl:shadow-2xs">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="exampleModalFullscreenXl-label">Full Screen Below xl</h3>
<button aria-label="Close" data-hs-overlay="exampleModalFullscreenXl" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="h-full overflow-y-auto p-5">...</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-light hover:text-primary m-1" data-hs-overlay="#exampleModalFullscreenXl" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Full screen below xxl -->
<div>
<button aria-controls="exampleModalFullscreenXxl" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary hover:bg-primary-hover rounded text-white" data-hs-overlay="#exampleModalFullscreenXxl" type="button">
                                                Full Screen Below xxl
                                            </button>
<div aria-labelledby="exampleModalFullscreenXxl-label" class="hs-overlay pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="exampleModalFullscreenXxl" role="dialog" tabindex="-1">
<div class="hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 xl:hs-overlay-open:mt-10 mt-10 h-full max-h-full max-w-full opacity-0 transition-all xl:mx-auto xl:mt-0 xl:h-auto xl:max-h-none xl:max-w-xl">
<div class="xl: border-default-300 pointer-events-auto flex h-full max-h-full max-w-full flex-col card xl:h-auto xl:max-h-none xl:max-w-lg xl:rounded-xl xl:border xl:shadow-2xs">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="exampleModalFullscreenXxl-label">Full Screen Below xxl</h3>
<button aria-label="Close" data-hs-overlay="exampleModalFullscreenXxl" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="h-full overflow-y-auto p-5">...</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-light hover:text-primary m-1" data-hs-overlay="#exampleModalFullscreenXxl" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Static Backdrop</h4>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.</p>
<div class="flex flex-wrap gap-2.5">
<!-- Static Backdrop modal -->
<div>
<button aria-controls="staticBackdrop" aria-expanded="false" aria-haspopup="dialog" class="btn bg-info hover:bg-info-hover rounded text-white" data-hs-overlay="#staticBackdrop" type="button">Static Backdrop</button>
<div aria-labelledby="staticBackdrop-label" class="hs-overlay [--overlay-backdrop:static] hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto opacity-0 transition-all" id="staticBackdrop" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target m-3 sm:mx-auto sm:w-full sm:max-w-lg">
<div class="border-default-300 pointer-events-auto flex flex-col rounded-md border card">
<div class="border-default-300 flex items-center justify-between border-b p-6">
<h3 class="text-base font-semibold" id="staticBackdrop-label">Modal title</h3>
<button aria-label=" Close" data-hs-overlay="#staticBackdrop" type="button">
<span class="sr-only">Close</span>
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="overflow-y-auto card-body">
<p>I will not close if you click outside me. Don't even try to press escape key.</p>
</div>
<div class="border-default-300 flex items-center justify-end border-t p-4">
<button class="btn bg-secondary hover:bg-secondary-hover m-1 rounded text-white" data-hs-overlay="#staticBackdrop" type="button">Close</button>
<button class="btn bg-primary hover:bg-primary-hover m-1 rounded text-white" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>
    </body>
</html>