<!doctype html>
<html lang="en">
    <head>
        <?php $title = "Dropdowns"; include('./partials/title-meta.php'); ?> <?php include('./partials/head-css.php'); ?>
    </head>

    <body>
        <!-- Begin page -->
        <div class="wrapper">
            <?php include('./partials/topbar.php'); ?> <?php include('./partials/sidenav.php'); ?>

            <!-- ============================================================== -->
            <!-- Start Main Content -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="container-fluid">
                    <?php $subtitle = "UI"; $title = "Dropdowns"; include('./partials/page-title.php'); ?>

                    <div class="container-xxl">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Examples</h4>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.</p>

                                        <a class="btn btn-link p-0 fw-semibold" href="https://getbootstrap.com/docs/5.3/components/dropdowns/" target="_blank">
                                            Dropdowns on Bootstrap
                                            <i class="ti ti-chevron-right ms-1"></i>
                                        </a>
                                    </div>
                                </div>

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Single Button Dropdowns</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            Any single
                                            <code>.btn</code>
                                            can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either
                                            <code>&lt;button&gt;</code>
                                            elements:
                                        </p>

                                        <div class="row">
                                            <div class="col-auto">
                                                <!-- Choose Option -->
                                                <div class="dropdown">
                                                    <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Choose Option</button>
                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                        <a class="dropdown-item" href="#">Profile Settings</a>
                                                        <a class="dropdown-item" href="#">Notifications</a>
                                                        <a class="dropdown-item" href="#">Logout</a>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-auto">
                                                <!-- Quick Actions -->
                                                <div class="dropdown">
                                                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Quick Actions</a>
                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                                        <a class="dropdown-item" href="#">Create New</a>
                                                        <a class="dropdown-item" href="#">Upload File</a>
                                                        <a class="dropdown-item" href="#">View Reports</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card-body -->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Menu Alignment</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            Add
                                            <code>.dropdown-menu-end</code>
                                            to a
                                            <code>.dropdown-menu</code>
                                            to right align the dropdown menu.
                                        </p>

                                        <div class="dropdown">
                                            <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Right-aligned menu</button>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Custom Dropdown Arrow</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            Any single
                                            <code>.btn</code>
                                            can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either
                                            <code>&lt;button&gt;</code>
                                            elements:
                                        </p>

                                        <div class="row">
                                            <div class="col-auto">
                                                <!-- Without Arrow -->
                                                <div class="dropdown">
                                                    <button class="btn btn-primary dropdown-toggle drop-arrow-none" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Without Arrow</button>
                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                        <a class="dropdown-item" href="#">Download Report</a>
                                                        <a class="dropdown-item" href="#">View Analytics</a>
                                                        <a class="dropdown-item" href="#">Export Data</a>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-auto">
                                                <!-- Tabler Icon  -->
                                                <div class="dropdown">
                                                    <button class="btn btn-outline-primary dropdown-toggle drop-arrow-none" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Custom Icon
                                                        <i class="ti ti-chevron-down ms-1"></i>
                                                    </button>
                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                                                        <a class="dropdown-item" href="#">Edit Profile</a>
                                                        <a class="dropdown-item" href="#">Account Settings</a>
                                                        <a class="dropdown-item" href="#">Sign Out</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body -->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Split Button Dropdowns</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of
                                            <code>.dropdown-toggle-split</code>
                                            for proper spacing around the dropdown caret.
                                        </p>

                                        <div class="d-flex flex-wrap gap-2">
                                            <div class="btn-group">
                                                <!-- Primary -->
                                                <button type="button" class="btn btn-primary">Primary</button>
                                                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split drop-arrow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="ti ti-chevron-down"></i>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                </div>
                                            </div>
                                            <!-- /btn-group -->

                                            <div class="btn-group">
                                                <!-- Secondary -->
                                                <button type="button" class="btn btn-light">Secondary</button>
                                                <button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split drop-arrow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="ti ti-chevron-down"></i>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                </div>
                                            </div>
                                            <!-- /btn-group -->

                                            <div class="btn-group">
                                                <!-- Success -->
                                                <button type="button" class="btn btn-soft-success">Success</button>
                                                <button type="button" class="btn btn-soft-success dropdown-toggle dropdown-toggle-split drop-arrow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="ti ti-chevron-down"></i>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                </div>
                                            </div>
                                            <!-- /btn-group -->

                                            <div class="btn-group">
                                                <!-- Info -->
                                                <button type="button" class="btn btn-info">Info</button>
                                                <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                </div>
                                            </div>
                                            <!-- /btn-group -->

                                            <div class="btn-group">
                                                <!-- Warning -->
                                                <button type="button" class="btn btn-warning">Warning</button>
                                                <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                </div>
                                            </div>
                                            <!-- /btn-group -->

                                            <div class="btn-group">
                                                <!-- Danger -->
                                                <button type="button" class="btn btn-danger">Danger</button>
                                                <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                </div>
                                            </div>
                                            <!-- /btn-group -->
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Variant</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">The best part is you can do this with any button variant, too:</p>

                                        <div class="d-flex flex-wrap gap-2">
                                            <div class="btn-group">
                                                <!-- Primary -->
                                                <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Create New</a>
                                                    <a class="dropdown-item" href="#">Save Changes</a>
                                                    <a class="dropdown-item" href="#">Publish Now</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">View Drafts</a>
                                                </div>
                                            </div>
                                            <!-- /btn-group -->

                                            <div class="btn-group">
                                                <!-- Secondary -->
                                                <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Settings</a>
                                                    <a class="dropdown-item" href="#">Preferences</a>
                                                    <a class="dropdown-item" href="#">Account Info</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Logout</a>
                                                </div>
                                            </div>
                                            <!-- /btn-group -->

                                            <div class="btn-group">
                                                <!-- Success -->
                                                <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Mark as Complete</a>
                                                    <a class="dropdown-item" href="#">Download Report</a>
                                                    <a class="dropdown-item" href="#">Submit Review</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Archive Task</a>
                                                </div>
                                            </div>
                                            <!-- /btn-group -->

                                            <div class="btn-group">
                                                <!-- Info -->
                                                <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">View Logs</a>
                                                    <a class="dropdown-item" href="#">System Info</a>
                                                    <a class="dropdown-item" href="#">Help Center</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Contact Support</a>
                                                </div>
                                            </div>
                                            <!-- /btn-group -->

                                            <div class="btn-group">
                                                <!-- Warning -->
                                                <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Pending Approvals</a>
                                                    <a class="dropdown-item" href="#">Overdue Tasks</a>
                                                    <a class="dropdown-item" href="#">Subscription Expiring</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Renew Plan</a>
                                                </div>
                                            </div>
                                            <!-- /btn-group -->

                                            <div class="btn-group">
                                                <!-- Danger -->
                                                <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Delete Item</a>
                                                    <a class="dropdown-item" href="#">Revoke Access</a>
                                                    <a class="dropdown-item" href="#">Reset Password</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Permanently Remove</a>
                                                </div>
                                            </div>
                                            <!-- /btn-group -->
                                        </div>
                                    </div>
                                    <!-- end card body -->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Sizing</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.</p>

                                        <div class="d-flex flex-wrap gap-2 align-items-center">
                                            <!-- Large button groups (default and split) -->
                                            <div class="btn-group">
                                                <button class="btn btn-light btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Large button</button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                </div>
                                            </div>

                                            <div class="btn-group">
                                                <button class="btn btn-light btn-lg" type="button">Large button</button>
                                                <button type="button" class="btn btn-lg btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                </div>
                                            </div>

                                            <!-- Small button groups (default and split) -->
                                            <div class="btn-group">
                                                <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Small button</button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                </div>
                                            </div>

                                            <div class="btn-group">
                                                <button class="btn btn-light btn-sm" type="button">Small button</button>
                                                <button type="button" class="btn btn-sm btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Dropup Variation</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            Trigger dropdown menus above elements by adding
                                            <code>.dropup</code>
                                            to the parent element.
                                        </p>

                                        <div class="d-flex flex-wrap gap-2">
                                            <!-- Default dropup button -->
                                            <div class="btn-group dropup">
                                                <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Upload File</a>
                                                    <a class="dropdown-item" href="#">Sync Data</a>
                                                    <a class="dropdown-item" href="#">Import from CSV</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Advanced Settings</a>
                                                </div>
                                            </div>

                                            <!-- Split dropup button -->
                                            <div class="btn-group dropup">
                                                <button type="button" class="btn btn-light">Split dropup</button>
                                                <button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">New Task</a>
                                                    <a class="dropdown-item" href="#">Assign User</a>
                                                    <a class="dropdown-item" href="#">Set Deadline</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Project Settings</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body -->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Dropstart Variation</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            Trigger dropdown menus at the right of the elements by adding
                                            <code>.dropleft</code>
                                            to the parent element.
                                        </p>

                                        <div class="d-flex flex-wrap gap-2">
                                            <!-- Default dropstart button -->
                                            <div class="btn-group dropstart">
                                                <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropstart</button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                </div>
                                            </div>

                                            <!-- Split dropstart button -->
                                            <div class="btn-group">
                                                <div class="btn-group dropstart" role="group">
                                                    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-split dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <span class="visually-hidden">Toggle Dropstart</span>
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="#">Action</a>
                                                        <a class="dropdown-item" href="#">Another action</a>
                                                        <a class="dropdown-item" href="#">Something else here</a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">Separated link</a>
                                                    </div>
                                                </div>
                                                <button type="button" class="btn btn-secondary">Split dropstart</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Dropend Variation</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            Trigger dropdown menus at the right of the elements by adding
                                            <code>.dropend</code>
                                            to the parent element.
                                        </p>

                                        <div class="d-flex flex-wrap gap-2">
                                            <!-- Default dropend button -->
                                            <div class="btn-group dropend">
                                                <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropend</button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">View Profile</a>
                                                    <a class="dropdown-item" href="#">Message User</a>
                                                    <a class="dropdown-item" href="#">Report Issue</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Block User</a>
                                                </div>
                                            </div>

                                            <!-- Split dropend button -->
                                            <div class="btn-group dropend">
                                                <button type="button" class="btn btn-primary">Split Dropend</button>
                                                <button type="button" class="btn btn-primary dropdown-toggle-split dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropright</span>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">New Invoice</a>
                                                    <a class="dropdown-item" href="#">Send Reminder</a>
                                                    <a class="dropdown-item" href="#">Duplicate</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Delete Invoice</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body -->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Active Item</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            Add
                                            <code>.active</code>
                                            to item in the dropdown to
                                            <strong>style them as active</strong>
                                            .
                                        </p>

                                        <!-- Active Item -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Active Item</button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Regular link</a>
                                                <a class="dropdown-item active" href="#">Active link</a>
                                                <a class="dropdown-item" href="#">Another link</a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Disabled Item</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            Add
                                            <code>.disabled</code>
                                            to items in the dropdown to
                                            <strong>style them as disabled</strong>
                                            .
                                        </p>

                                        <!-- Disabled -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Disabled</button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Regular link</a>
                                                <a class="dropdown-item disabled" href="#" tabindex="-1">Disabled link</a>
                                                <a class="dropdown-item" href="#">Another link</a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Headers</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">Add a header to label sections of actions in any dropdown menu.</p>

                                        <!-- Header Item -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Header</button>
                                            <div class="dropdown-menu">
                                                <h6 class="dropdown-header">Dropdown header</h6>
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Dark Dropdowns</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            Opt into darker dropdowns to match a dark navbar or custom style by adding
                                            <code>.dropdown-menu-dark</code>
                                            onto an existing
                                            <code>.dropdown-menu</code>
                                            . No changes are required to the dropdown items.
                                        </p>

                                        <div class="dropdown">
                                            <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dark Dropdown</button>
                                            <ul class="dropdown-menu" data-bs-theme="dark">
                                                <li>
                                                    <a class="dropdown-item active" href="#">Dashboard</a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="#">My Orders</a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="#">Billing Settings</a>
                                                </li>
                                                <li>
                                                    <hr class="dropdown-divider" />
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="#">Logout</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Centered Dropdowns</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            Make the dropdown menu centered below the toggle with
                                            <code>.dropdown-center</code>
                                            on the parent element.
                                        </p>

                                        <div class="hstack gap-2">
                                            <div class="dropdown-center">
                                                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Centered dropdown</button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item" href="#">Action</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Action two</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Action three</a>
                                                    </li>
                                                </ul>
                                            </div>

                                            <div class="dropup-center dropup">
                                                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Centered dropup</button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item" href="#">Action</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Action two</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Action three</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Dropdown Options</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            Use
                                            <code>data-bs-offset</code>
                                            or
                                            <code>data-bs-reference</code>
                                            to change the location of the dropdown.
                                        </p>

                                        <div class="d-flex flex-wrap gap-2">
                                            <div class="dropdown">
                                                <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">Offset</button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item" href="#">Profile Settings</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Privacy Settings</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Notification Preferences</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-secondary">Reference</button>
                                                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item" href="#">Manage Subscription</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Account Preferences</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Help & Support</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider" />
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Log Out</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Auto Close Behavior</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">
                                            By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the
                                            <code>autoClose</code>
                                            option to change this behavior of the dropdown.
                                        </p>

                                        <div class="hstack gap-2">
                                            <div class="btn-group">
                                                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Default dropdown</button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item" href="#">Menu item</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Menu item</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Menu item</a>
                                                    </li>
                                                </ul>
                                            </div>

                                            <div class="btn-group">
                                                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">Clickable inside</button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item" href="#">Menu item</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Menu item</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Menu item</a>
                                                    </li>
                                                </ul>
                                            </div>

                                            <div class="btn-group">
                                                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Clickable outside</button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item" href="#">Menu item</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Menu item</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Menu item</a>
                                                    </li>
                                                </ul>
                                            </div>

                                            <div class="btn-group">
                                                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">Manual close</button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item" href="#">Menu item</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Menu item</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#">Menu item</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Text</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.</p>

                                        <!-- Text Example -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Text Dropdown</button>
                                            <div class="dropdown-menu p-3 text-muted" style="max-width: 200px">
                                                <p>Some example text that's free-flowing within the dropdown menu.</p>
                                                <p class="mb-0">And this is more example text.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->

                                <div class="card">
                                    <div class="card-header">
                                        <div class="flex-grow-1">
                                            <h4 class="card-title">Forms</h4>
                                        </div>
                                        <div class="card-action">
                                            <a href="#!" class="card-action-item" data-action="card-toggle">
                                                <i class="ti ti-chevron-up align-middle"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <p class="text-muted">Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.</p>

                                        <!-- Forms -->
                                        <div class="dropdown">
                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Form</button>
                                            <div class="dropdown-menu">
                                                <form class="px-4 py-3">
                                                    <div class="mb-3">
                                                        <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
                                                        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
                                                        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password" />
                                                    </div>
                                                    <div class="mb-2">
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="dropdownCheck" />
                                                            <label class="form-check-label" for="dropdownCheck">Remember me</label>
                                                        </div>
                                                    </div>
                                                    <button type="submit" class="btn btn-primary">Sign in</button>
                                                </form>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">New around here? Sign up</a>
                                                <a class="dropdown-item" href="#">Forgot password?</a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end card body-->
                                </div>
                                <!-- end card-->
                            </div>
                            <!-- end col -->
                        </div>
                        <!-- end row -->
                    </div>
                    <!-- container -->
                </div>
                <!-- container-fluid -->

                <?php include('./partials/footer.php'); ?>
            </div>

            <!-- ============================================================== -->
            <!-- End of Main Content -->
            <!-- ============================================================== -->
        </div>
        <!-- END wrapper -->

        <?php include('./partials/customizer.php'); ?> <?php include('./partials/footer-scripts.php'); ?>
    </body>
</html>
