<!DOCTYPE html>

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

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

                    <div class="container">
<div class="grid xl:grid-cols-2 gap-base">
<div class="card">
<div class="card-header">
<h4 class="card-title">Basic</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.</p>
<div aria-labelledby="dismiss-button-label" class="hs-removing:translate-x-5 hs-removing:opacity-0 bg-default-100 border-default-300 max-w-xs rounded-md border shadow transition duration-300" id="dismiss-toast" role="alert" tabindex="-1">
<div class="border-default-300 flex items-center border-b px-3 py-2">
<p class="text-default-600 flex items-center gap-1.5 text-sm" id="dismiss-button-label">
<img alt="brand-logo" class="size-4" src="/images/logo-sm.png"/>
<strong class="me-auto font-semibold">BRAND</strong>
</p>
<div class="ms-auto flex items-center gap-2">
<span class="text-default-400 text-xs">11 mins ago</span>
<button aria-label="Close" class="flex items-center justify-center opacity-50 hover:opacity-100 focus:opacity-100 focus:outline-hidden" data-hs-remove-element="#dismiss-toast" type="button">
<i class="iconify tabler--x text-default-800 size-6"></i>
</button>
</div>
</div>
<div class="p-3 text-sm">Hello, world! This is a toast message.</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Placement</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                        Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the toast.
                                    </p>
<div class="p-20">
<div class="absolute start-1/2 top-45 -translate-x-1/2 transform">
<div aria-labelledby="placement-label" class="hs-removing:translate-x-5 hs-removing:opacity-0 bg-default-100 border-default-300 w-60 rounded-md border shadow transition duration-300 md:w-80" id="placement-toast" role="alert" tabindex="-1">
<div class="border-default-300 flex items-center border-b px-3 py-2">
<p class="text-default-600 flex items-center gap-1.5 text-sm" id="placement-label">
<img alt="brand-logo" class="size-4" src="/images/logo-sm.png"/>
<strong class="me-auto font-semibold">BRAND</strong>
</p>
<div class="ms-auto flex items-center gap-2">
<span class="text-default-400 text-xs">11 mins ago</span>
<button aria-label="Close" class="flex items-center justify-center opacity-50 hover:opacity-100 focus:opacity-100 focus:outline-hidden" data-hs-remove-element="#placement-toast" type="button">
<i class="iconify tabler--x text-default-800 size-6"></i>
</button>
</div>
</div>
<div class="p-3 text-sm">Hello, world! This is a toast message.</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Custom content</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<div class="space-y-3">
<div aria-labelledby="Custom-label" class="hs-removing:translate-x-5 hs-removing:opacity-0 bg-default-100 border-default-300 max-w-xs rounded-md border shadow transition duration-300" id="Custom-toast" role="alert" tabindex="-1">
<div class="border-default-300 flex items-center border-b p-3">
<p class="text-default-600 flex items-center gap-1.5 text-sm" id="Custom-label">Hello, world! This is a toast message.</p>
<div class="ms-auto flex items-center gap-2">
<button aria-label="Close" class="flex items-center justify-center opacity-50 hover:opacity-100 focus:opacity-100 focus:outline-hidden" data-hs-remove-element="#Custom-toast" type="button">
<i class="iconify tabler--x text-default-800 text-2xl"></i>
</button>
</div>
</div>
</div>
<div aria-labelledby="Custom-label2" class="hs-removing:translate-x-5 hs-removing:opacity-0 bg-primary border-default-300 max-w-xs rounded-md border transition duration-300" id="Custom-toast2" role="alert" tabindex="-1">
<div class="border-default-300 flex items-center border-b p-3 text-white">
<p class="flex items-center gap-1.5 text-sm" id="Custom-label2">Hello, world! This is a toast message.</p>
<div class="ms-auto flex items-center gap-2">
<button aria-label="Close" class="flex items-center justify-center opacity-50 hover:opacity-100 focus:opacity-100 focus:outline-hidden" data-hs-remove-element="#Custom-toast2" type="button">
<i class="iconify tabler--x text-2xl"></i>
</button>
</div>
</div>
</div>
<div aria-labelledby="Custom-label3" class="hs-removing:translate-x-5 hs-removing:opacity-0 bg-default-100 border-default-300 max-w-xs rounded-md border p-3 transition duration-300" id="Custom-toast3" role="alert" tabindex="-1">
<div class="border-default-300 text-default-600 flex items-center border-b pb-3">
<p class="flex items-center gap-1.5 text-sm" id="Custom-label3">Hello, world! This is a toast message.</p>
</div>
<div class="mt-3 flex items-center gap-1">
<button class="btn btn-sm bg-primary hover:bg-primary-hover text-white">Take action</button>
<button aria-label="Close" class="btn btn-sm bg-secondary hover:bg-secondary-hover text-white" data-hs-remove-element="#Custom-toast3">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Stacking</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">When you have multiple toasts, we default to vertiaclly stacking them in a readable manner.</p>
<div class="flex justify-end">
<div class="space-y-base p-5">
<div>
<div aria-labelledby="Stacking-label" class="hs-removing:translate-x-5 hs-removing:opacity-0 bg-default-100 border-default-300 max-w-xs rounded-md border shadow transition duration-300" id="Stacking-1" role="alert" tabindex="-1">
<div class="border-default-300 flex items-center border-b px-3 py-2">
<p class="text-default-600 flex items-center gap-1.5 text-sm" id="Stacking-label">
<img alt="brand-logo" class="size-4" src="/images/logo-sm.png"/>
<strong class="me-auto font-semibold">BRAND</strong>
</p>
<div class="ms-auto flex items-center gap-2">
<span class="text-default-400 text-xs">Just Now</span>
<button aria-label="Close" class="flex items-center justify-center opacity-50 hover:opacity-100 focus:opacity-100 focus:outline-hidden" data-hs-remove-element="#Stacking-1" type="button">
<i class="iconify tabler--x text-default-800 text-xl"></i>
</button>
</div>
</div>
<div class="p-3 text-sm">See? Just like this.</div>
</div>
</div>
<div>
<div aria-labelledby="Stacking-label-2" class="hs-removing:translate-x-5 hs-removing:opacity-0 bg-default-100 border-default-300 max-w-xs rounded-md border shadow transition duration-300" id="Stacking-2" role="alert" tabindex="-1">
<div class="border-default-300 flex items-center border-b px-3 py-2">
<p class="text-default-600 flex items-center gap-1.5 text-sm" id="Stacking-label-2">
<img alt="brand-logo" class="size-4" src="/images/logo-sm.png"/>
<strong class="me-auto font-semibold">BRAND</strong>
</p>
<div class="ms-auto flex items-center gap-2">
<span class="text-default-400 text-xs">2 seconds ago</span>
<button aria-label="Close" class="flex items-center justify-center opacity-50 hover:opacity-100 focus:opacity-100 focus:outline-hidden" data-hs-remove-element="#Stacking-2" type="button">
<i class="iconify tabler--x text-default-800 text-xl"></i>
</button>
</div>
</div>
<div class="p-3 text-sm">Heads up, toasts will stack automatically</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>

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

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