<button class="btn-settings" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop"><span class="fas fa-sliders-h"></span> <span>PANEL</span></button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h4 id="offcanvasRightLabel" class="fw-bold mb-0 f-24">Antler Setup</h4>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"><i class="ico-x"></i></button>
  </div>
  <div id="container_layout" class="offcanvas-body">
    <a href="https://themeforest.net/item/antler-hosting-provider-whmcs-template/23139614" target="_blank" class="btn btn-default-pink-fill d-grid mb-3">Buy Now on Envato $29</a>

    <div class="offcanvas-content">
      <!-- ***** LAYOUT MODE ****** -->
      <h6 class="text-muted text-center fw-bold f-16 pb-4">Layout Mode</h6>
      <div id="LayoutScheme" class="overflow-hidden">
        <div class="row gy-3">
          <div class="col-xs-6 col-md-6">
            <div class="p-4 mb-4 border text-center text-muted bg-light stylelayout f-16" data-value="wide">Wide</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 mb-4 border text-center text-muted bg-light stylelayout f-16" data-value="frame">Frame</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 border text-center text-muted bg-light stylelayout f-16" data-value="boxed">Boxed</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 border text-center text-muted bg-light stylelayout f-16" data-value="wideboxed">Wide Boxed</div>
          </div>
        </div>
      </div>
    </div>
    <hr>

    <div class="offcanvas-content">
      <!-- ***** BACKGROUND STYLE ****** -->
      <h6 class="text-muted text-center fw-bold f-16 pb-4">Background Style</h6>
      <div id="BackgroundScheme" class="overflow-hidden">
        <div class="row gy-3">
          <div class="col-xs-6 col-md-6">
            <div class="p-4 mb-4 border text-center text-muted bg-light stylebackground f-16" data-value="origin">Origin</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 mb-4 border text-center text-muted bg-light stylebackground f-16" data-value="light">Light</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 border text-center text-muted bg-light stylebackground f-16" data-value="dark">Dark</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 border text-center text-muted" data-value="dark">SOON</div>
          </div>
        </div>
      </div>
    </div>
    <hr>

    <div class="offcanvas-content">
      <!-- ***** COLOR SCHEME ****** -->
      <h6 class="text-muted text-center fw-bold f-16 pb-4">Color Scheme</h6>
      <div id="ColorScheme" class="overflow-hidden">
        <div class="row gy-3">
          <div class="col-xs-6 col-md-6">
            <div class="p-4 mb-4 border text-center text-muted bg-light stylecolor f-16" data-value="pink">Pink Mode</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 mb-4 border text-center text-muted bg-light stylecolor f-16" data-value="blue">Blue Mode</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 border text-center text-muted bg-light stylecolor f-16" data-value="green">Green Mode</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 border text-center text-muted bg-light stylecolor f-16" data-value="black">Black Mode</div>
          </div>
        </div>
      </div>
    </div>
    <hr>

    <div class="offcanvas-content">
      <!-- ***** HEADER POSITIONS ****** -->
      <h6 class="text-muted text-center fw-bold f-16 pb-4">Header Position</h6>
      <div id="HeaderScheme" class="overflow-hidden">
        <div class="row gy-3">
          <div class="col-xs-6 col-md-6">
            <div class="p-4 border text-center text-muted bg-light styleheader f-16" data-value="static">Static</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 border text-center text-muted bg-light styleheader f-16" data-value="fixed">Fixed</div>
          </div>
        </div>
      </div>
    </div>
    <hr>

    <div class="offcanvas-content">
      <!-- ***** FONT BODY ****** -->
      <h6 class="text-muted text-center fw-bold f-16 pb-4">Body Font</h6>
      <div id="FontScheme" class="overflow-hidden">
        <div class="row gy-3">
          <div class="col-xs-6 col-md-6">
            <div class="p-4 mb-4 border text-center text-muted bg-light stylefont f-16" data-value="opensans">Open Sans</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 mb-4 border text-center text-muted bg-light stylefont f-16" data-value="poppins">Poppins</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 border text-center text-muted bg-light stylefont f-16" data-value="nunito">Nunito</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 border text-center text-muted bg-light stylefont f-16" data-value="raleway">Raleway</div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="offcanvas-content">
      <!-- ***** TEXT DIRECTIONS ****** -->
      <h6 class="text-muted text-center fw-bold f-16 pb-4">Text Direction</h6>
      <div class="overflow-hidden">
        <div class="row gy-3">
          <div class="col-xs-6 col-md-6">
            <a href="?language=english"><div class="p-4 border text-center text-muted bg-light f-16 ltractive">LTR Support</div></a>
          </div>
          <div class="col-xs-6 col-md-6">
            <a href="?language=arabic"><div class="p-4 border text-center text-muted bg-light f-16 rtlactive">RTL Support</div></a>
          </div>
        </div>
      </div>
    </div>
    <hr>

    <div class="offcanvas-content">
      <!-- ***** BORDER RADIUS ****** -->
      <h6 class="text-muted text-center fw-bold f-16 pb-4">Border Radius</h6>
      <div id="RadiusScheme" class="overflow-hidden">
        <div class="row gy-3">
          <div class="col-xs-6 col-md-6">
            <div class="p-4 mb-4 border text-center text-muted bg-light styleradius f-16" data-value="defaultradius">Default</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 mb-4 border text-center text-muted bg-light styleradius f-16" data-value="threeradius">3 Radius</div>
          </div>
          <div class="col-xs-6 col-md-6">
            <div class="p-4 border text-center text-muted bg-light styleradius f-16" data-value="sixradius">6 Radius</div>
          </div>

          <div class="col-xs-6 col-md-6">
            <div class="p-4 border text-center text-muted bg-light styleradius f-16" data-value="twelveradius">12 Radius</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
<div class="offcanvas-backdrop fade" data-bs-dismiss="offcanvas"></div>

<a href="https://inebur.com/antler/overview/#themes" target="_blank">
  <button class="btn-demos" type="button"><span class="fas fa-layer-group"></span> <span>DEMOS</span></button>
</a>
<script defer src="{$WEB_ROOT}/templates/{$template}/assets/js/settings.js"></script>