<!DOCTYPE html>
<html lang="zxx">
    <?php require __DIR__ . '/includes/head.php'; ?>

    <body class="bg-body-bg"><?php require __DIR__ . '/includes/loading.php'; ?><?php require __DIR__ . '/includes/sidebar.php'; ?>


        <!-- Start Main Content Area -->
        <div class="container-fluid">
            <div class="main-content d-flex flex-column">
                <?php require __DIR__ . '/includes/topbar.php'; ?>


                <div class="main-content-container overflow-hidden">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4 mt-1">
                        <h3 class="mb-0">Settings</h3>

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb align-items-center mb-0 lh-1">
                                <li class="breadcrumb-item">
                                    <a href="index.html" class="d-flex align-items-center text-decoration-none">
                                        <i class="ri-home-8-line fs-15 text-primary me-1"></i>
                                        <span class="text-body fs-14 hover">Dashboard</span>
                                    </a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span class="text-secondary">Settings</span>
                                </li>
                            </ol>
                        </nav>
                    </div>

                    <div class="card bg-white border border-white rounded-10 p-20 mb-4">
                        <ul class="ps-0 mb-4 list-unstyled d-flex flex-wrap gap-2 gap-lg-3">
                            <li>
                                <a href="account-settings.html" class="btn btn-primary border-border-color-70 bg-transparent text-secondary fs-16 fw-normal px-3 px-lg-4">Account Settings</a>
                            </li>
                            <li>
                                <a href="change-password.html" class="btn btn-primary border-border-color-70 bg-transparent text-secondary fs-16 fw-normal px-3 px-lg-4">Change Password</a>
                            </li>
                            <li>
                                <a href="connections.html" class="btn btn-primary border-border-color-70 bg-transparent text-secondary fs-16 fw-normal px-3 px-lg-4">Connections</a>
                            </li>
                            <li>
                                <a href="privacy-policy.html" class="btn btn-primary border-primary bg-primary text-white fs-16 fw-normal px-3 px-lg-4">Privacy Policy</a>
                            </li>
                            <li>
                                <a href="terms-conditions.html" class="btn btn-primary border-border-color-70 bg-transparent text-secondary fs-16 fw-normal px-3 px-lg-4">Terms & Conditions</a>
                            </li>
                        </ul>
                        
                        <h3 class="fs-22 mb-20">Security :</h3>

                        <ul class="p-0 mb-20 list-unstyled last-child-none">
                            <li class="mb-20">
                                <span class="d-block fs-16 fw-medium text-secondary mb-10">Two-factor Authentication</span>
                                <p class="fs-16 lh-1-8">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of.</p>
                            </li>
                            <li class="mb-20">
                                <span class="d-block fs-16 fw-medium text-secondary mb-10">Secondary Verification</span>
                                <p class="fs-16 lh-1-8">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing.</p>
                            </li>
                            <li class="mb-20">
                                <span class="d-block fs-16 fw-medium text-secondary mb-10">Backup Codes</span>
                                <p class="fs-16 lh-1-8">Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of lorem ipsum.</p>
                            </li>
                            <li class="mb-20">
                                <span class="d-block fs-16 fw-medium text-secondary mb-10">Desktop, email, chat, purchase notifications</span>
                                <p class="fs-16 lh-1-8">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
                            </li>
                            <li class="mb-20">
                                <span class="d-block fs-16 fw-medium text-secondary mb-10">Delete This Account :</span>
                                <p class="fs-16 lh-1-8">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                            </li>
                        </ul>

                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-primary fw-normal text-white">Close & Delete This Account</button>
                            <button type="button" class="btn btn-danger fw-normal text-white" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>

                <div class="flex-grow-1"></div>

                <?php require __DIR__ . '/includes/footer.php'; ?>

            </div>
        </div>
        <!-- Start Main Content Area -->

        <!-- Start Theme Setting Area -->
        <button class="btn btn-primary theme-settings-btn p-0 position-fixed z-2 text-center rounded-circle" style="bottom: 24px; right: 24px; width: 56px; height: 56px; line-height: 54px;" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">
            <i class="text-white ri-settings-3-fill fs-28" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Click On Theme Settings"></i>
        </button>

        <!-- Start Theme Setting Area -->
        <div class="offcanvas offcanvas-end bg-white border-0" data-bs-scroll="true" data-bs-backdrop="true" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel" style="box-shadow: 0 4px 20px #2f8fe812 !important; max-width: 300px;">
            <div class="offcanvas-header bg-light p-20">
                <h5 class="offcanvas-title fs-18 fw-medium" id="offcanvasScrollingLabel">Configuration Panel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body p-0 overflow-hidden">
                <div class="last-child-none" style="max-height: 858px;" data-simplebar>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">RTL Mode</h4>
                        <div class="rtl-btn">
                            <label id="switch">
                                <input type="checkbox" onchange="toggleTheme()" class="toggle-switch rtl-switch" id="slider">
                            </label>
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Only Sidebar Dark</h4>
                        <div class="sidebar-light-dark" id="sidebar-light-dark">
                            <input type="checkbox" class="toggle-switch sidebar-dark-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Only Header Dark</h4>
                        <div class="header-light-dark" id="header-light-dark">
                            <input type="checkbox" class="toggle-switch header-dark-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Right Sidebar</h4>
                        <div class="right-sidebar" id="right-sidebar">
                            <input type="checkbox" class="toggle-switch right-sidebar-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Hide Sidebar</h4>
                        <div class="icon-sidebar" id="icon-sidebar">
                            <input type="checkbox" class="toggle-switch icon-sidebar-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Bordered Card</h4>
                        <div class="card-border" id="card-border">
                            <input type="checkbox" class="toggle-switch border-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Card Border Radius</h4>
                        <div class="card-radius-square" id="card-radius-square">
                            <input type="checkbox" class="toggle-switch border-radius-switch">
                        </div>
                    </div>
                    
                    <div class="p-20 border-bottom child">
                        <a href="#" class="btn btn-primary text-white">
                            Buy Fila
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Theme Setting Area -->
     
        <!-- Link Of JS File -->
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/sidebar-menu.js"></script>
        <script src="assets/js/quill.min.js"></script>
        <script src="assets/js/data-table.js"></script>
        <script src="assets/js/prism.js"></script>
        <script src="assets/js/clipboard.min.js"></script>
        <script src="assets/js/simplebar.min.js"></script>
        <script src="assets/js/apexcharts.min.js"></script>
        <script src="assets/js/echarts.min.js"></script>
        <script src="assets/js/swiper-bundle.min.js"></script>
        <script src="assets/js/fullcalendar.main.js"></script>
        <script src="assets/js/jsvectormap.min.js"></script>
        <script src="assets/js/world-merc.js"></script>
        <script src="assets/js/custom/apexcharts.js"></script>
        <script src="assets/js/custom/echarts.js"></script>
        <script src="assets/js/custom/maps.js"></script>
        <script src="assets/js/custom/custom.js"></script>
    </body>
</html>