<!DOCTYPE html>

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

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

                    <div class="container">
<div class="grid grid-cols-1 gap-base">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default Alert</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-4">
<div class="bg-primary/15 text-primary flex items-center rounded px-4 py-3" role="alert">This is a primary alert—something important you should know!</div>
<div class="bg-secondary/15 text-secondary flex items-center rounded px-4 py-3" role="alert">This is a secondary alert—some additional context.</div>
<div class="bg-success/15 text-success flex items-center rounded px-4 py-3" role="alert">Success! Your operation was completed successfully.</div>
<div class="bg-danger/15 text-danger flex items-center rounded px-4 py-3" role="alert">Error! Something went wrong—please try again.</div>
<div class="bg-warning/15 text-warning flex items-center rounded px-4 py-3" role="alert">Warning! Please double-check your inputs.</div>
<div class="bg-info/15 text-info flex items-center rounded px-4 py-3" role="alert">Info: Here's something you might find useful.</div>
<div class="bg-light/40 text-dark flex items-center rounded px-4 py-3" role="alert">Light alert—just a subtle notification.</div>
<div class="bg-dark/15 text-dark flex items-center rounded px-4 py-3" role="alert">Dark alert—use for general-purpose messages.</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Dismissing Alert with Solid Colors</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-4">
<div class="bg-primary flex items-center rounded px-4 py-3 text-white" role="alert">Heads up! This is a primary alert with important information.</div>
<div class="bg-secondary flex items-center rounded px-4 py-3 text-white" role="alert">Notice: This is a secondary alert with supporting details.</div>
<div class="bg-success flex items-center rounded px-4 py-3 text-white" role="alert">Success! Your action was completed successfully.</div>
<div class="bg-danger flex items-center rounded px-4 py-3 text-white" role="alert">Error! Something went wrong—please try again later.</div>
<div class="bg-warning flex items-center rounded px-4 py-3 text-white" role="alert">Warning! Please review your input before proceeding.</div>
<div class="bg-info flex items-center rounded px-4 py-3 text-white" role="alert">Info: Here’s something you might find helpful.</div>
<div class="bg-light text-dark flex items-center rounded px-4 py-3" role="alert">Note: This is a light alert with a subtle message.</div>
<div class="bg-dark flex items-center rounded px-4 py-3 text-white" role="alert">Notice: This dark alert is great for general messages.</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Link Color</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-4">
<div class="bg-primary/15 text-primary flex items-center gap-1 rounded px-4 py-3" role="alert">
                                            Need more info? Check out
                                            <a class="font-bold" href="#">this primary link</a>
                                            for important details.
                                        </div>
<div class="bg-secondary/15 text-secondary flex items-center gap-1 rounded px-4 py-3" role="alert">
                                            Here's a secondary message with
                                            <a class="font-bold" href="#">a helpful link</a>
                                            for additional context.
                                        </div>
<div class="bg-success/15 text-success flex items-center gap-1 rounded px-4 py-3" role="alert">
                                            Operation successful! View the results
                                            <a class="font-bold" href="#">by clicking here.</a>
</div>
<div class="bg-danger/15 text-danger flex items-center gap-1 rounded px-4 py-3" role="alert">
                                            Something went wrong. Learn more
                                            <a class="font-bold" href="#">through this alert link.</a>
</div>
<div class="bg-info/15 text-info flex items-center gap-1 rounded px-4 py-3" role="alert">
                                            Here’s some information that may help—click
                                            <a class="font-bold" href="#">this link</a>
                                            to read more.
                                        </div>
<div class="bg-light text-dark flex items-center gap-1 rounded px-4 py-3" role="alert">
                                            Just a light reminder with
                                            <a class="font-bold" href="#">a gentle link</a>
                                            to explore.
                                        </div>
<div class="bg-dark/15 text-dark flex items-center gap-1 rounded px-4 py-3" role="alert">
                                            This is a general dark alert. Find out more
                                            <a class="font-bold" href="#">by clicking here.</a>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Additional 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-4">
<div class="bg-success/15 text-success rounded p-6" role="alert">
<h4 class="text-success mb-2 text-lg font-semibold">Great job!</h4>
<p class="mb-4">You’ve successfully read this important alert message. The text is intentionally a bit longer to demonstrate how spacing behaves in this kind of layout.</p>
<hr class="border-success/20 my-4"/>
<p>Use margin utilities to keep your content clean and organized.</p>
</div>
<div class="bg-secondary/15 text-secondary flex gap-3 rounded p-6" role="alert">
<i class="iconify tabler--alarm-snooze size-8"></i>
<div>
<h4 class="text-secondary mb-2 text-lg font-semibold">Heads up!</h4>
<p class="mb-4">This alert message gives additional information with a longer message to show content spacing within an alert.</p>
<hr class="border-secondary/20 my-4"/>
<p>Apply spacing classes wisely to maintain structure and clarity.</p>
</div>
</div>
<div class="bg-danger/15 text-danger flex gap-3 rounded p-6" role="alert">
<i class="iconify tabler--phone-ringing size-8"></i>
<div>
<h4 class="text-danger mb-2 text-lg font-semibold">Notice!</h4>
<p class="mb-4">You’ve just read through a primary alert message. The extra length helps show how well the layout handles content spacing.</p>
<button class="btn bg-danger btn-sm text-white" type="button">Got it</button>
</div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Custom Alerts</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-4">
<div class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 border-b-2 border-dark bg-dark/15 text-dark flex items-center rounded px-4 py-3" id="dark-alert" role="alert">
                                            A dark alert with a bottom border!

                                            <button class="ms-auto" data-hs-remove-element="#dark-alert">
<i class="iconify tabler--x text-2xl text-default-700"></i>
</button>
</div>
<div class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 border-2 border-dashed border-success bg-success/15 text-success flex items-center rounded px-4 py-3" id="success-alert" role="alert">
                                            A success alert with a dashed border!

                                            <button class="ms-auto" data-hs-remove-element="#success-alert">
<i class="iconify tabler--x text-2xl text-default-700"></i>
</button>
</div>
<div class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 border-2 border-danger bg-danger/15 text-danger flex items-center rounded px-4 py-3" id="danger-alert" role="alert">
                                            A danger alert with a thick border!

                                            <button class="ms-auto" data-hs-remove-element="#danger-alert">
<i class="iconify tabler--x text-2xl text-default-700"></i>
</button>
</div>
<div class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 bg-warning/15 text-warning flex items-center rounded px-4 py-3" id="warning-alert" role="alert">
                                            A warning alert with a custom close button!

                                            <button class="ms-auto size-7.5 flex justify-center items-center rounded-full bg-warning text-white" data-hs-remove-element="#warning-alert">
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 bg-info/15 text-info flex items-center rounded px-4 py-3" id="info-alert" role="alert">
<div class="flex gap-3 items-center">
<i class="iconify tabler--alert-octagon text-xl"></i>
                                                An info alert with a custom icon!
                                            </div>
<button class="ms-auto" data-hs-remove-element="#info-alert">
<i class="iconify tabler--x size-6 text-default-700"></i>
</button>
</div>
<div class="border-light bg-light/20 text-light flex items-center gap-base rounded border-2 p-6" role="alert">
<i class="iconify tabler--phone-ringing text-success size-7"></i>
<div class="text-default-400">
<h4 class="text-default-400 mb-2 text-lg font-semibold">Notice!</h4>
<p>You’ve just read through a primary alert message. The extra length helps show how well the layout handles content spacing.</p>
</div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Dismiss Alerts</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-4">
<div class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 border-primary bg-primary/15 text-primary flex items-center rounded border px-4 py-3" id="dismiss-alert" role="alert">
                                            A primary alert with a Dismiss Alerts!

                                            <button class="ms-auto" data-hs-remove-element="#dismiss-alert">
<i class="iconify tabler--x text-2xl text-default-700"></i>
</button>
</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>