<?php include('partials/app-html.php'); ?>

<head>
    <?php $pageTitle = "Groups"; include('partials/app-meta-title.php'); ?>

    <?php include('partials/app-head-css.php'); ?>
</head>

<body>

    <div class="app-wrap">

        <?php include('partials/app-header.php'); ?>

        <?php include('partials/app-sidebar.php'); ?>

        <main class="app-body">
            <div class="app-content">

                <div class="content-wrapper">

                    <?php $pageTitle = "Groups"; $pageSubTitle1 = "Design"; $pageSubTitle2 = "Forms"; $pageSubText = "Input groups allow you to combine input fields with additional elements like text, icons, or buttons for enhanced functionality and design."; include('partials/app-pagetitle.php'); ?>

                    <div class="main-content">

                        <div class="row">
                            <div class="col-xl-6">
                                <div id="panel-1" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Basic <span class="fw-300"><i>example</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                <p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <code>&lt;label&gt;</code>s outside the input group.</p>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label" for="basic-addon1">Prepend</label>
                                                <div class="input-group">
                                                    <span class="input-group-text">@</span>
                                                    <input type="text" id="basic-addon1" name="username" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" autocomplete="username">
                                                </div>
                                                <div class="form-text">Some help content goes here</div>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label" for="basic-addon2">Append</label>
                                                <div class="input-group">
                                                    <input id="basic-addon2" name="recipient" type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" autocomplete="off">
                                                    <span class="input-group-text">@example.com</span>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label" for="basic-url">Your vanity URL</label>
                                                <div class="input-group">
                                                    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
                                                    <input type="text" class="form-control" id="basic-url" name="vanity-url" aria-describedby="basic-addon3" autocomplete="off">
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label">Prepend and append</label>
                                                <div class="input-group">
                                                    <span class="input-group-text">$</span>
                                                    <input type="text" class="form-control" id="amount-input" name="amount" aria-label="Amount (to the nearest dollar)" autocomplete="off">
                                                    <span class="input-group-text">.00</span>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label">Text area example</label>
                                                <div class="input-group">
                                                    <span class="input-group-text">Comment</span>
                                                    <textarea class="form-control" id="comment-textarea" name="comment" aria-label="With textarea" autocomplete="off"></textarea>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div id="panel-2" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Wrapping <span class="fw-300"><i>inputs</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate custom form field validation within an input group. You may disable this with <code>.flex-nowrap</code>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="addon-wrapping-left">Prepend with flex-nowrap</label>
                                                <div class="input-group flex-nowrap">
                                                    <span class="input-group-text"><i class="sa sa-user fs-xl"></i></span>
                                                    <input id="addon-wrapping-left" name="username-left" type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping-left" autocomplete="username">
                                                </div>
                                            </div>
                                            <div class="mb-0">
                                                <label class="form-label" for="addon-wrapping-right">Append with flex-nowrap</label>
                                                <div class="input-group flex-nowrap">
                                                    <input id="addon-wrapping-right" name="username-right" type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping-right" autocomplete="username">
                                                    <span class="input-group-text"><i class="sa sa-user fs-xl"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-3" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Various <span class="fw-300"><i>sizing</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element. <strong>Sizing on the individual input group elements isn't supported</strong>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="input-group-lg-size">Large Input Group</label>
                                                <div class="input-group input-group-lg">
                                                    <span class="input-group-text py-1 px-3">
                                                        <div class="stack-icon" style="font-size: 2.25rem;">
                                                            <div class="icon-layers stack-3x">
                                                                <i class="sa sa-base-2 text-success"></i>
                                                            </div>
                                                            <div class="icon-layers stack-2x">
                                                                <i class="sa sa-base-10 stack-2x alpha-2"></i>
                                                            </div>
                                                            <div class="icon-layers stack-1x">
                                                                <i class="sa sa-base-10 stack-1x text-light"></i>
                                                            </div>
                                                            <div class="icon-layers stack-1x">
                                                                <i class="sa sa-profile stack-1x text-dark"></i>
                                                            </div>
                                                        </div>
                                                    </span>
                                                    <input id="input-group-lg-size" name="large-input" type="text" class="form-control" placeholder="Large size" aria-describedby="input-group-lg-size">
                                                </div>
                                                <span class="form-text text-muted">Some help content goes here</span>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="input-group-lg-size-2">Large Input Group</label>
                                                <div class="input-group input-group-lg">
                                                    <span class="input-group-text">
                                                        0.00%
                                                    </span>
                                                    <span class="input-group-text text-danger">
                                                        <i class="sa sa-lock"></i>
                                                    </span>
                                                    <input id="input-group-lg-size-2" name="large-input-2" type="text" class="form-control" placeholder="Large size" aria-describedby="input-group-lg-size-2">
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="input-group-sm-size">Small Input Group</label>
                                                <div class="input-group input-group-sm">
                                                    <input id="input-group-sm-size" name="small-input" type="text" class="form-control" placeholder="Small size" aria-describedby="input-group-sm-size">
                                                    <span class="input-group-text">
                                                        <i class="sa sa-reload"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="mb-0">
                                                <label class="form-label" for="input-group-sm-size-2">Small Input Group</label>
                                                <div class="input-group input-group-sm">
                                                    <span class="input-group-text">
                                                        <i class="sa sa-reload"></i>
                                                    </span>
                                                    <input id="input-group-sm-size-2" name="small-input-2" type="text" class="form-control" placeholder="Small size" aria-describedby="input-group-sm-size-2">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-4" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Checkboxes <span class="fw-300"><i>and radios</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Place any checkbox or radio option within an input group's addon instead of text
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="checkbox-group-1">Checkbox generic</label>
                                                <div class="input-group">
                                                    <span class="input-group-text">
                                                        <input type="checkbox" id="checkbox-generic" name="checkbox-generic" aria-label="Checkbox for following text input">
                                                    </span>
                                                    <input type="text" class="form-control" id="checkbox-group-1" name="checkbox-text" aria-label="Text input with checkbox" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="checkbox-group-2">Checkbox</label>
                                                <div class="input-group">
                                                    <span class="input-group-text">
                                                        <div class="form-check mb-0">
                                                            <input type="checkbox" class="form-check-input" id="checkmeout1" name="checkmeout1">
                                                            <label class="form-check-label" for="checkmeout1">I agree</label>
                                                        </div>
                                                    </span>
                                                    <span class="input-group-text text-success">
                                                        <span class="fw-500">$</span>
                                                    </span>
                                                    <input type="text" class="form-control" id="checkbox-group-2" name="checkbox-text-2" aria-label="Text input with checkbox" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="checkbox-group-3">Checkbox split</label>
                                                <div class="input-group">
                                                    <span class="input-group-text text-success">
                                                        <i class="sa sa-big-plus fs-xl"></i>
                                                    </span>
                                                    <input type="text" class="form-control" id="checkbox-group-3" name="checkbox-text-3" aria-label="Text input with checkbox" autocomplete="off">
                                                    <span class="input-group-text">
                                                        <div class="form-check mb-0">
                                                            <input type="checkbox" class="form-check-input" id="checkmeout2" name="checkmeout2">
                                                            <label class="form-check-label" for="checkmeout2">I agree</label>
                                                        </div>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="checkbox-group-4">Checkbox switch</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="checkbox-group-4" name="checkbox-text-4" aria-label="Text input with checkbox" placeholder="Record title" autocomplete="off">
                                                    <span class="input-group-text">
                                                        <div class="form-check form-switch mb-0">
                                                            <input id="eventlog-switch-1" name="debugger-active" type="checkbox" class="form-check-input">
                                                            <label class="form-check-label fw-500" for="eventlog-switch-1">Debugger Active</label>
                                                        </div>
                                                    </span>
                                                    <span class="input-group-text">
                                                        <div class="form-check form-switch mb-0">
                                                            <input id="eventlog-switch-2" name="record-logs" type="checkbox" class="form-check-input">
                                                            <label class="form-check-label fw-500" for="eventlog-switch-2">Record Logs</label>
                                                        </div>
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label" for="radio-group-1">Radio generic</label>
                                                <div class="input-group">
                                                    <div class="input-group-text">
                                                        <div class="form-check form-switch mb-0">
                                                            <input type="radio" id="customRadio1" name="customRadio" class="form-check-input">
                                                            <label class="form-check-label" for="customRadio1">Yes</label>
                                                        </div>
                                                    </div>
                                                    <div class="input-group-text">
                                                        <div class="form-check form-switch mb-0">
                                                            <input type="radio" id="customRadio2" name="customRadio" class="form-check-input">
                                                            <label class="form-check-label" for="customRadio2">No</label>
                                                        </div>
                                                    </div>
                                                    <input type="text" class="form-control" id="radio-group-1" name="radio-text" aria-label="Text input with radio button">
                                                </div>
                                            </div>
                                            <div class="mb-0">
                                                <label class="form-label" for="radio-group-2">Radio generic</label>
                                                <div class="input-group">
                                                    <div class="input-group-text">
                                                        <div class="form-check mb-0">
                                                            <input type="radio" id="customRadio3" name="customRadio2" class="form-check-input">
                                                            <label class="form-check-label" for="customRadio3">Yes</label>
                                                        </div>
                                                    </div>
                                                    <div class="input-group-text text-danger">
                                                        <span class="fw-500">$</span>
                                                    </div>
                                                    <input type="text" class="form-control" id="radio-group-2" name="radio-text-2" aria-label="Text input with radio button">
                                                    <div class="input-group-text">
                                                        <div class="form-check mb-0">
                                                            <input type="radio" id="customRadio4" name="customRadio2" class="form-check-input">
                                                            <label class="form-check-label" for="customRadio4">No</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-5" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Multiple <span class="fw-300"><i>inputs</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element. You can add <code>.input-group-multi-transition</code> to <code>.input-group</code> to animate focused inputs
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="name-f">Two input fields</label>
                                                <div class="input-group">
                                                    <span class="input-group-text text-success">
                                                        <i class="sa sa-user fs-xl"></i>
                                                    </span>
                                                    <input type="text" aria-label="First name" class="form-control" placeholder="First name" id="name-f" name="first-name" autocomplete="given-name">
                                                    <input type="text" aria-label="Last name" class="form-control" placeholder="Last name" id="name-l" name="last-name" autocomplete="family-name">
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="dollar-1">Three input fields (animated)</label>
                                                <div class="input-group input-group-multi-transition">
                                                    <span class="input-group-text">@</span>
                                                    <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)" id="dollar-1" name="recipient" placeholder="Recipient" autocomplete="off">
                                                    <input type="text" class="form-control" aria-label="Person name" id="dollar-2" name="email" placeholder="Email" autocomplete="email">
                                                    <input type="text" class="form-control" aria-label="Person name" id="dollar-3" name="amount" placeholder="Amount" autocomplete="off">
                                                    <span class="input-group-text">0.00</span>
                                                </div>
                                            </div>
                                            <div class="mb-0">
                                                <label class="form-label">Between two inputs</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="between-input-1" name="between-input-1" autocomplete="off">
                                                    <span class="input-group-text">
                                                        <i class="sa sa-arrow-right fs-xl"></i>
                                                    </span>
                                                    <input type="text" class="form-control" id="between-input-2" name="between-input-2" autocomplete="off">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-9" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Segmented <span class="fw-300"><i>buttons</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Dropdown with action buttons
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="drop-w-action-left">Button from left</label>
                                                <div class="input-group">
                                                    <button type="button" class="btn btn-outline-default" id="button-addon1" name="button-addon1">Go</button>
                                                    <button type="button" class="btn btn-outline-default dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <span class="visually-hidden">Toggle Dropdown</span>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a class="dropdown-item" href="#">Action</a></li>
                                                        <li><a class="dropdown-item" href="#">Another action</a></li>
                                                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                        <li><a class="dropdown-item" href="#">Separated link</a></li>
                                                    </ul>
                                                    <input type="text" class="form-control" aria-label="Text input with segmented dropdown button" id="drop-w-action-left" name="dropdown-input-left">
                                                </div>
                                            </div>
                                            <div class="mb-0">
                                                <label class="form-label" for="drop-w-action-right">Button from right</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" aria-label="Text input with segmented dropdown button" id="drop-w-action-right" name="dropdown-input-right">
                                                    <button type="button" class="btn btn-outline-default" id="button-addon2" name="button-addon2">Action</button>
                                                    <button type="button" class="btn btn-outline-default dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <span class="visually-hidden">Toggle Dropdown</span>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#">Action</a></li>
                                                        <li><a class="dropdown-item" href="#">Another action</a></li>
                                                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                        <li><a class="dropdown-item" href="#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div id="panel-6" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Seamless <span class="fw-300"><i>icon</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Add seamless icons using various utility classes
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Icon on left</label>
                                                <div class="input-group body-bg shadow-inset-2 rounded">
                                                    <span class="input-group-text bg-transparent border-end-0">
                                                        <i class="sa sa-magnifier text-dark"></i>
                                                    </span>
                                                    <input type="text" class="form-control border-start-0 bg-transparent ps-0" id="search-left" name="search-left" placeholder="Search..." autocomplete="off">
                                                </div>
                                                <span class="form-text text-muted">Some help content goes here</span>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Icon on Right</label>
                                                <div class="input-group body-bg shadow-inset-2 rounded">
                                                    <input type="text" class="form-control border-end-0 bg-transparent pe-0" id="search-right" name="search-right" placeholder="Search..." autocomplete="off">
                                                    <span class="input-group-text bg-transparent border-start-0">
                                                        <i class="sa sa-magnifier text-dark"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Large icon</label>
                                                <div class="input-group input-group-lg body-bg shadow-inset-2 rounded">
                                                    <span class="input-group-text bg-transparent border-end-0 py-1 px-3">
                                                        <div class="stack-icon" style="font-size: 2.2rem;">
                                                            <div class="icon-layers">
                                                                <i class="sa sa-base-7 text-info"></i>
                                                            </div>
                                                            <div class="icon-layers">
                                                                <svg class="sa-icon stack-1x sa-icon-light sa-bold">
                                                                    <use href="/public/icons/sprite.svg#database"></use>
                                                                </svg>
                                                            </div>
                                                        </div>
                                                    </span>
                                                    <input type="text" class="form-control border-start-0 bg-transparent ps-0" id="search-large" name="search-large" placeholder="Search..." autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Small icon with button</label>
                                                <div class="input-group input-group-sm body-bg shadow-inset-2 rounded">
                                                    <span class="input-group-text bg-transparent border-end-0 py-1 px-3">
                                                        <i class="sa sa-magnifier text-success"></i>
                                                    </span>
                                                    <input type="text" class="form-control border-start-0 bg-transparent ps-0" id="search-small" name="search-small" placeholder="Type here..." autocomplete="off">
                                                    <button class="btn btn-outline-default" type="button" id="search-btn" name="search-btn">Search</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-7" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Button <span class="fw-300"><i>addon</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="mb-3">
                                                <label class="form-label" for="button-addon1">Button on left</label>
                                                <div class="input-group">
                                                    <button class="btn btn-outline-default" type="button" id="button-addon1" name="button-addon1">Go</button>
                                                    <input type="text" class="form-control" id="button-input-1" name="button-input-1" placeholder="Search anything..." aria-label="Example text with button addon" aria-describedby="button-addon1" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="button-addon2">Button on right</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="button-input-2" name="button-input-2" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2" autocomplete="off">
                                                    <button class="btn btn-outline-default" type="button" id="button-addon2" name="button-addon2">Look up!</button>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="button-addon3">Button on both sides</label>
                                                <div class="input-group">
                                                    <button class="btn btn-outline-default" type="button" id="button-addon3-1" name="button-addon3-1">Go</button>
                                                    <input id="button-addon3" name="button-input-3" type="text" class="form-control" placeholder="Search for anything..." aria-label="Example text with two button addons" aria-describedby="button-addon3" autocomplete="off">
                                                    <button class="btn btn-outline-default" type="button" id="button-addon3-2" name="button-addon3-2">Go</button>
                                                    <button class="btn btn-outline-default" type="button" id="button-addon3-3" name="button-addon3-3">Go</button>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="button-addon4">Button on left with icon</label>
                                                <div class="input-group">
                                                    <button class="btn btn-info shadow-0" type="button" id="button-addon4" name="button-addon4"><i class="sa sa-magnifier"></i></button>
                                                    <input id="button-input-4" name="button-input-4" type="text" class="form-control" placeholder="Search anything..." aria-label="Example text with button addon" aria-describedby="button-addon4" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="mb-0">
                                                <label class="form-label" for="button-addon5">Button on right</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="button-input-5" name="button-input-5" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon5" autocomplete="off">
                                                    <button class="btn btn-primary shadow-0" type="button" id="button-addon5" name="button-addon5"><i class="sa sa-magnifier"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-8" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Buttons <span class="fw-300"><i>with dropdown</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Dropdowns are easily integrated just like buttons, you can have more than one dropdowns
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="dropdown-on-left">Dropdown on left</label>
                                                <div class="input-group">
                                                    <button class="btn btn-outline-default dropdown-toggle" type="button" id="dropdown-on-left" name="dropdown-on-left" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</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 role="separator" class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">Separated link</a>
                                                    </div>
                                                    <input type="text" class="form-control" aria-label="Text input with dropdown button" id="dropdown-input-left" name="dropdown-input-left" autocomplete="off">
                                                </div>
                                                <span class="form-text text-muted">Some help content goes here</span>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="dropdown-on-right">Dropdown on right</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" aria-label="Text input with dropdown button" id="dropdown-input-right" name="dropdown-input-right" autocomplete="off">
                                                    <button class="btn btn-outline-default dropdown-toggle" type="button" id="dropdown-on-right" name="dropdown-on-right" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</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 role="separator" class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">Separated link</a>
                                                    </div>
                                                </div>
                                                <span class="form-text text-muted">Some help content goes here</span>
                                            </div>
                                            <div class="mb-0">
                                                <label class="form-label">Dropdown on both</label>
                                                <div class="input-group">
                                                    <button class="btn btn-outline-default dropdown-toggle" type="button" id="dropdown-on-both-left" name="dropdown-on-both-left" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</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 role="separator" class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">Separated link</a>
                                                    </div>
                                                    <input type="text" class="form-control" aria-label="Text input with dropdown button" id="dropdown-input-both" name="dropdown-input-both" autocomplete="off">
                                                    <button class="btn btn-outline-default dropdown-toggle" type="button" id="dropdown-on-both-right" name="dropdown-on-both-right" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item" href="#">Action</a></li>
                                                        <a class="dropdown-item" href="#">Another action</a></li>
                                                        <a class="dropdown-item" href="#">Something else here</a></li>
                                                        <div role="separator" class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="#">Separated link</a></li>
                                                    </div>
                                                </div>
                                                <span class="form-text text-muted">Some help content goes here</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-10" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Custom <span class="fw-300"><i>forms</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="inputGroupSelect01">Label & select on left</label>
                                                <div class="input-group">
                                                    <label class="input-group-text" for="inputGroupSelect01">Options</label>
                                                    <select class="form-select" id="inputGroupSelect01" name="inputGroupSelect01" autocomplete="off">
                                                        <option selected>Choose...</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="inputGroupSelect02">Label & select on right</label>
                                                <div class="input-group">
                                                    <select class="form-select" id="inputGroupSelect02" name="inputGroupSelect02" autocomplete="off">
                                                        <option selected>Choose...</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                    </select>
                                                    <label class="input-group-text" for="inputGroupSelect02">Options</label>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="inputGroupSelect03">Button & select on left</label>
                                                <div class="input-group">
                                                    <button class="btn btn-outline-default" type="button" id="button-select-1" name="button-select-1">Button</button>
                                                    <select class="form-select" id="inputGroupSelect03" name="inputGroupSelect03" aria-label="Example select with button addon" autocomplete="off">
                                                        <option selected>Choose...</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="mb-0">
                                                <label class="form-label" for="inputGroupSelect04">Button & select on right</label>
                                                <div class="input-group">
                                                    <select class="form-select" id="inputGroupSelect04" name="inputGroupSelect04" aria-label="Example select with button addon" autocomplete="off">
                                                        <option selected>Choose...</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                    </select>
                                                    <button class="btn btn-outline-default" type="button" id="button-select-2" name="button-select-2">Button</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-11" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            File <span class="fw-300"><i>upload</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Combine file upload with addon elements
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="inputGroupFile01">File input with addon</label>
                                                <div class="input-group">
                                                    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
                                                    <input type="file" class="form-control" id="inputGroupFile01" name="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                                                </div>
                                                <div class="form-text">Some help content goes here</div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="inputGroupFile02">Button & select on right</label>
                                                <div class="input-group">
                                                    <input type="file" class="form-control" id="inputGroupFile02" name="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
                                                    <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="inputGroupFile03">Button & select on right</label>
                                                <div class="input-group">
                                                    <button class="btn btn-outline-default" type="button" id="inputGroupFileAddon03" name="inputGroupFileAddon03">Button</button>
                                                    <input type="file" class="form-control" id="inputGroupFile03" name="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
                                                </div>
                                                <div class="form-text">Some help content goes here</div>
                                            </div>
                                            <div class="mb-0">
                                                <label class="form-label" for="inputGroupFile04">Button & select on right</label>
                                                <div class="input-group">
                                                    <input type="file" class="form-control" id="inputGroupFile04" name="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
                                                    <button class="btn btn-outline-default" type="button" id="inputGroupFileAddon04" name="inputGroupFileAddon04">Button</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-12" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Kitchen <span class="fw-300"><i>sink</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                A combination of elements working in harmony
                                            </div>
                                            <div class="mb-0">
                                                <label class="form-label" for="name-f">Combined elements</label>
                                                <div class="input-group">
                                                    <span class="input-group-text text-success">
                                                        <i class="sa sa-user fs-xl"></i>
                                                    </span>
                                                    <input type="text" class="form-control" placeholder="User" id="user" name="user" autocomplete="username">
                                                    <span class="input-group-text">
                                                        <i class="sa sa-arrow-right fs-xl"></i>
                                                    </span>
                                                    <select class="form-select" id="usertype" name="usertype" aria-label="usertype" autocomplete="off">
                                                        <option selected="">User type</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                    </select>
                                                    <button type="button" class="btn btn-success shadow-0" id="save-button" name="save-button">Save</button>
                                                    <button type="button" class="btn btn-success shadow-0 dropdown-toggle dropdown-toggle-split" id="save-dropdown" name="save-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <span class="visually-hidden">Toggle Dropdown</span>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li><a class="dropdown-item" href="#">Action</a></li>
                                                        <li><a class="dropdown-item" href="#">Another action</a></li>
                                                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                        <li><a class="dropdown-item" href="#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                                <div class="form-text">Some help content goes here</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            </div>

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

        </main>

        <?php include('partials/app-drawer.php'); ?>

        <?php include('partials/app-settings.php'); ?>

    </div>

    <?php include('partials/app-scripts.php'); ?>

</body>

</html>