{% load static i18n %}

<!-- Theme Settings Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="theme-settings-offcanvas">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title" id="offcanvasRightLabel">{% trans "Theme Settings" %}</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>

    <div class="offcanvas-body p-0">
        <div data-simplebar class="h-100">
            <div class="p-3">
                <h5 class="mb-3 fs-16 fw-bold">{% trans "Color Scheme" %}</h5>

                <div class="form-check form-switch mb-1">
                    <input class="form-check-input" type="checkbox" name="data-bs-theme" value="dark" id="layout-color-dark">
                    <label class="form-check-label" for="layout-color-dark">{% trans "Dark Mode" %}</label>
                </div>
            </div>

            <div class="p-3">
                <h5 class="mb-3 fs-16 fw-bold">{% trans "Menu Color" %}</h5>

                <div class="row">
                    <div class="col-6">
                        <div class="form-check form-check-inline card-radio">
                            <input id="customizer-menucolor-light" name="data-menu-color" class="form-check-input" type="radio" value="light">
                            <label class="form-check-label p-0" for="customizer-menucolor-light">
                                <div>
                                    <span class="d-flex h-100">
                                        <span class="flex-shrink-0">
                                            <span class="bg-light d-flex h-100 flex-column p-1 px-2">
                                                <span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
                                                <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                                <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                                <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                                <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1">
                                            <span class="d-flex h-100 flex-column">
                                                <span class="bg-light d-block p-1"></span>
                                            </span>
                                        </span>
                                    </span>
                                </div>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center fw-medium mt-2">{% trans "Light" %}</h5>
                    </div>

                    <div class="col-6">
                        <div class="form-check form-check-inline card-radio">
                            <input id="customizer-menucolor-dark" name="data-menu-color" class="form-check-input" type="radio" value="dark" checked>
                            <label class="form-check-label p-0" for="customizer-menucolor-dark">
                                <div>
                                    <span class="d-flex h-100">
                                        <span class="flex-shrink-0">
                                            <span class="bg-dark d-flex h-100 flex-column p-1 px-2">
                                                <span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
                                                <span class="d-block border border-secondary border-opacity-25 border-3 rounded w-100 mb-1"></span>
                                                <span class="d-block border border-secondary border-opacity-25 border-3 rounded w-100 mb-1"></span>
                                                <span class="d-block border border-secondary border-opacity-25 border-3 rounded w-100 mb-1"></span>
                                                <span class="d-block border border-secondary border-opacity-25 border-3 rounded w-100 mb-1"></span>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1">
                                            <span class="d-flex h-100 flex-column">
                                                <span class="bg-light d-block p-1"></span>
                                            </span>
                                        </span>
                                    </span>
                                </div>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center fw-medium mt-2">{% trans "Dark" %}</h5>
                    </div>
                </div>
            </div>

            <div class="p-3">
                <h5 class="mb-3 fs-16 fw-bold">{% trans "Topbar Color" %}</h5>

                <div class="row">
                    <div class="col-6">
                        <div class="form-check form-check-inline card-radio">
                            <input id="customizer-topbar-light" name="data-topbar-color" class="form-check-input" type="radio" value="light" checked>
                            <label class="form-check-label p-0" for="customizer-topbar-light">
                                <div>
                                    <span class="d-flex h-100">
                                        <span class="flex-shrink-0">
                                            <span class="bg-light d-flex h-100 flex-column p-1 px-2">
                                                <span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
                                                <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                                <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1">
                                            <span class="d-flex h-100 flex-column">
                                                <span class="bg-light d-block p-1"></span>
                                            </span>
                                        </span>
                                    </span>
                                </div>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center fw-medium mt-2">{% trans "Light" %}</h5>
                    </div>

                    <div class="col-6">
                        <div class="form-check form-check-inline card-radio">
                            <input id="customizer-topbar-dark" name="data-topbar-color" class="form-check-input" type="radio" value="dark">
                            <label class="form-check-label p-0" for="customizer-topbar-dark">
                                <div>
                                    <span class="d-flex h-100">
                                        <span class="flex-shrink-0">
                                            <span class="bg-light d-flex h-100 flex-column p-1 px-2">
                                                <span class="d-block p-1 bg-primary-lighten rounded mb-1"></span>
                                                <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                                <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1">
                                            <span class="d-flex h-100 flex-column">
                                                <span class="bg-dark d-block p-1"></span>
                                            </span>
                                        </span>
                                    </span>
                                </div>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center fw-medium mt-2">{% trans "Dark" %}</h5>
                    </div>
                </div>
            </div>

            <div class="p-3">
                <h5 class="mb-3 fs-16 fw-bold">{% trans "Sidebar Size" %}</h5>

                <div class="row">
                    <div class="col-6">
                        <div class="form-check form-check-inline card-radio">
                            <input id="customizer-sidebar-default" name="data-sidebar-size" class="form-check-input" type="radio" value="default" checked>
                            <label class="form-check-label p-0" for="customizer-sidebar-default">
                                <span class="d-flex h-100">
                                    <span class="flex-shrink-0">
                                        <span class="bg-light d-flex h-100 flex-column p-1 px-2">
                                            <span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
                                            <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                            <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                            <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light d-block p-1"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center fw-medium mt-2">{% trans "Default" %}</h5>
                    </div>

                    <div class="col-6">
                        <div class="form-check form-check-inline card-radio">
                            <input id="customizer-sidebar-sm" name="data-sidebar-size" class="form-check-input" type="radio" value="condensed">
                            <label class="form-check-label p-0" for="customizer-sidebar-sm">
                                <span class="d-flex h-100">
                                    <span class="flex-shrink-0">
                                        <span class="bg-light d-flex h-100 flex-column p-1">
                                            <span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
                                            <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                            <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                            <span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light d-block p-1"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center fw-medium mt-2">{% trans "Compact" %}</h5>
                    </div>
                </div>
            </div>

            <div class="p-3 border-top">
                <button type="button" class="btn btn-primary w-100" id="resetThemeBtn">
                    <i class="ri-refresh-line me-1"></i> {% trans "Reset to Default" %}
                </button>
            </div>

        </div>
    </div>
</div>