<div
  class="d-flex justify-content-between text-bg-primary gap-2 p-3"
  style="background-image: url(assets/images/user-bg-pattern.png)"
>
  <div>
    <h5 class="mb-1 fw-bold text-white text-uppercase">Admin Customizer</h5>
    <p class="text-white text-opacity-75 fst-italic fw-medium mb-0">
      Easily configure layout, styles, and preferences for your admin interface.
    </p>
  </div>

  <div class="flex-grow-0">
    <button
      (click)="close()"
      type="button"
      class="d-block btn btn-sm bg-white bg-opacity-25 text-white rounded-circle btn-icon"
    >
      <ng-icon name="tablerX" class="fs-lg" />
    </button>
  </div>
</div>

<ngx-simplebar class="offcanvas-body p-0 h-100" style="max-height: 80vh">
  <div class="p-3 border-bottom border-dashed">
    <h5 class="mb-3 fw-bold">Color Scheme</h5>
    <div class="row">
      @for (item of themeOptions; track item.theme) {
      <div class="col-4">
        <div class="form-check card-radio">
          <input
            class="form-check-input"
            type="radio"
            name="data-bs-theme"
            [id]="'theme-' + item.theme"
            [value]="item.theme"
            [checked]="layout.theme === item.theme"
            (change)="layout.setTheme(item.theme)"
          />
          <label
            class="form-check-label p-0 w-100"
            [for]="'theme-' + item.theme"
          >
            <img
              [src]="item.image"
              alt="layout-img"
              class="img-fluid overflow-hidden"
            />
          </label>
        </div>
        <h5 class="text-center text-muted mt-2 mb-0">
          {{ toPascalCase(item.theme) }}
        </h5>
      </div>
      }
    </div>
  </div>

  <div class="p-3 border-bottom border-dashed">
    <h5 class="mb-3 fw-bold">Topbar Color</h5>
    <div class="row g-3">
      @for (item of topBarColorOptions; track item.color) {
      <div class="col-4">
        <div class="form-check card-radio">
          <input
            class="form-check-input"
            type="radio"
            name="data-topbar-color"
            [id]="'topbar-color-' + item.color"
            [value]="item.color"
            [checked]="layout.topbarColor === item.color"
            (change)="layout.setTopbarColor(item.color)"
          />
          <label
            class="form-check-label p-0 w-100"
            [for]="'topbar-color-' + item.color"
          >
            <img [src]="item.image" alt="layout-img" class="img-fluid" />
          </label>
        </div>
        <h5 class="text-center text-muted mt-2 mb-0">
          {{ toPascalCase(item.color) }}
        </h5>
      </div>
      }
    </div>
  </div>

  <div class="p-3 border-bottom border-dashed">
    <h5 class="mb-3 fw-bold">Sidenav Color</h5>
    <div class="row g-3">
      @for (item of sidenavColorOptions; track item.color) {
      <div class="col-4">
        <div class="form-check card-radio">
          <input
            class="form-check-input"
            type="radio"
            name="data-menu-color"
            [id]="'sidenav-color-' + item.color"
            [value]="item.color"
            [checked]="layout.sidenavColor === item.color"
            (change)="layout.setSidenavColor(item.color)"
          />
          <label
            class="form-check-label p-0 w-100"
            [for]="'sidenav-color-' + item.color"
          >
            <img [src]="item.image" alt="layout-img" class="img-fluid" />
          </label>
        </div>
        <h5 class="text-center text-muted mt-2 mb-0">
          {{ toPascalCase(item.color) }}
        </h5>
      </div>
      }
    </div>
  </div>

  <div class="p-3 border-bottom border-dashed">
    <h5 class="mb-3 fw-bold">Sidebar Size</h5>
    <div class="row g-3">
      @for (item of sidenavSizeOptions; track item.size) {
      <div class="col-4">
        <div class="form-check card-radio">
          <input
            class="form-check-input"
            type="radio"
            name="data-sidenav-size"
            [id]="'sidenav-size-' + item.size"
            [value]="item.size"
            [checked]="layout.sidenavSize === item.size"
            (change)="layout.setSidenavSize(item.size)"
          />
          <label
            class="form-check-label p-0 w-100"
            [for]="'sidenav-size-' + item.size"
          >
            <img [src]="item.image" alt="layout-img" class="img-fluid" />
          </label>
        </div>
        <h5 class="text-center text-muted mt-2 mb-0">{{ item.label }}</h5>
      </div>
      }
    </div>
  </div>

  <div class="p-3 border-bottom border-dashed">
    <div class="d-flex justify-content-between align-items-center">
      <h5 class="fw-bold mb-0">Layout Position</h5>
      <div class="btn-group radio" role="group">
        @for (item of layoutPositionOptions; track item.position) {
        <input
          type="radio"
          class="btn-check"
          name="data-layout-position"
          [id]="'layout-position-' + item.position"
          [value]="item.position"
          [checked]="layout.position === item.position"
          (change)="layout.setLayoutPosition(item.position)"
        />
        <label
          class="btn btn-sm btn-soft-primary w-sm"
          [for]="'layout-position-' + item.position"
        >
          {{ toPascalCase(item.position) }}
        </label>
        }
      </div>
    </div>
  </div>

  <div class="p-3">
    <div class="d-flex justify-content-between align-items-center">
      <h5 class="mb-0">
        <label class="fw-bold m-0" for="sidebaruser-check"
          >Sidebar User Info</label
        >
      </h5>
      <div class="form-check form-switch fs-lg">
        <input
          type="checkbox"
          class="form-check-input"
          name="sidebar-user"
          [checked]="layout.sidenavUser"
          (change)="layout.toggleSidenavUser()"
        />
      </div>
    </div>
  </div>
</ngx-simplebar>

<!-- Footer -->
<div class="offcanvas-footer border-top p-3 text-center">
  <div class="row">
    <div class="col-6">
      <button
        (click)="layout.reset()"
        type="button"
        class="btn btn-primary fw-semibold py-2 w-100"
        id="reset-layout"
      >
        Reset
      </button>
    </div>
    <div class="col-6">
      <a
        href="#"
        target="_blank"
        class="btn btn-danger bg-gradient py-2 fw-semibold w-100"
        >Buy Now</a
      >
    </div>
  </div>
</div>
