<div class="m-3">
    <div class="card w-100">
        <div class="card-header text-center context-main-bg">
            <a class="btn btn-link text-decoration-none" data-bs-toggle="collapse" href="#filterOptions" role="button" aria-expanded="false" aria-controls="filterOptions">
                <strong class="h3 context-main"><i class="fa-solid fa-fw fa-gears"></i></strong>
            </a>
        </div>
        <div id="filterOptions" class="collapse">
            <form method="post">
                <div class="card-body context-second-bg">
                    <fieldset>
                        <!-- Edit Mode -->
                        <div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
                            <div class="me-3 fw-bold">Edit Mode:</div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="editModeSwitch" name="editModeSwitch"{editModeSwitch_IS_CHECKED}>
                                <label class="form-check-label" for="editModeSwitch"></label>
                            </div>
                        </div>

                        <!-- Status Filters -->
                        <div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
                            <div class="me-3 fw-bold">Status:</div>
                            <div class="form-check form-switch me-3">
                                <input class="form-check-input" type="checkbox" id="showArchivedSwitch" name="showArchivedSwitch"{showArchivedSwitch_IS_CHECKED}>
                                <label class="form-check-label" for="showArchivedSwitch">Show Archived</label>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="showHiddenSwitch" name="showHiddenSwitch"{showHiddenSwitch_IS_CHECKED}>
                                <label class="form-check-label" for="showHiddenSwitch">Show Hidden</label>
                            </div>
                        </div>

                        <!-- Buttons Filters -->
                        <div class="d-flex align-items-center border p-2 rounded context-main-bg">
                            <div class="me-3 fw-bold">Buttons:</div>
                            <div class="form-check form-switch me-3">
                                <input class="form-check-input" type="checkbox" id="archiveButtonSwitch" name="archiveButtonSwitch"{archiveButtonSwitch_IS_CHECKED}>
                                <label class="form-check-label" for="archiveButtonSwitch">Archive Button</label>
                            </div>
                            <div class="form-check form-switch me-3">
                                <input class="form-check-input" type="checkbox" id="visibilityButtonSwitch" name="visibilityButtonSwitch"{visibilityButtonSwitch_IS_CHECKED}>
                                <label class="form-check-label" for="visibilityButtonSwitch">Visibility Button</label>
                            </div>
                            <div class="form-check form-switch me-3">
                                <input class="form-check-input" type="checkbox" id="privacyButtonSwitch" name="privacyButtonSwitch"{privacyButtonSwitch_IS_CHECKED}>
                                <label class="form-check-label" for="privacyButtonSwitch">Privacy Button</label>
                            </div>
                            <div class="form-check form-switch me-3">
                                <input class="form-check-input" type="checkbox" id="shareButtonSwitch" name="shareButtonSwitch"{shareButtonSwitch_IS_CHECKED}>
                                <label class="form-check-label" for="shareButtonSwitch">Share Button</label>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="addButtonSwitch" name="addButtonSwitch"{addButtonSwitch_IS_CHECKED}>
                                <label class="form-check-label" for="addButtonSwitch">Add Button</label>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="card-footer d-flex justify-content-center align-items-center context-main-bg">
                    <button type="submit" name="submit" value="submit" class="btn btn-md atb-green-outline my-2">Save as Default</button>
                </div>
            </form>
        </div>
    </div>
</div>
