<template>
  <v-navigation-drawer width="400">
    <v-list nav class="px-0">
      <v-list-item class="py-0">
        <breadcrumbs :breadcrumbsItems="items" />
      </v-list-item>
      <v-list-item class="px-0">
        <v-text-field
          v-model="search"
          placeholder="Search Products..."
          hide-details
          variant="solo-filled"
        >
          <template v-slot:append-inner>
            <v-btn
              color="white"
              size="small"
              class="bg-primary"
              icon="mdi-magnify"
            ></v-btn>
          </template>
        </v-text-field>
      </v-list-item>
      <v-divider></v-divider>
      <v-list-item class="pa-0">
        <v-expansion-panels flat>
          <v-expansion-panel v-for="n in 5" :key="n">
            <v-expansion-panel-title
              collapse-icon="mdi-chevron-up text-accent "
            >
              <h5 class="text-h6">Energy</h5>
            </v-expansion-panel-title>

            <v-expansion-panel-text>
              <div
                class="px-6"
                v-for="(checkbox, index) in limitedCheckboxes"
                :key="index"
              >
                <v-checkbox-btn
                  color="primary"
                  hide-details
                  :value="checkbox"
                  style="opacity: 1 !important"
                >
                  <template v-slot:label>
                    <h5 class="text-h6 text-black">{{ checkbox }}</h5>
                  </template>
                </v-checkbox-btn>
              </div>

              <!-- v-expansion-panels for "Show more" -->
              <v-expansion-panels>
                <v-expansion-panel>
                  <v-expansion-panel-title class="show_more"
                    >Show more</v-expansion-panel-title
                  >
                  <template v-slot:text>
                    <div
                      v-for="(checkbox, index) in remainingCheckboxes"
                      :key="index"
                    >
                      <v-checkbox-btn
                        color="primary"
                        hide-details
                        :value="checkbox"
                        style="opacity: 1 !important"
                      >
                        <template v-slot:label>
                          <h5 class="text-h6 text-black">{{ checkbox }}</h5>
                        </template>
                      </v-checkbox-btn>
                    </div>
                  </template>
                </v-expansion-panel>
              </v-expansion-panels>
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script setup>
import { computed, ref } from "vue";
import breadcrumbs from "@/core/components/breadcrumbs.vue";
const checkboxes = ref([
  "MCB",
  "RCCB",
  "RCBO",
  "Landfill",
  "Accessory MCB",
  "MCB6",
  "MCB7",
  "MCB8",
  "MCB9",
  "MCB10",
]);

const limitedCheckboxes = computed(() => checkboxes.value.slice(0, 5));
const remainingCheckboxes = computed(() => checkboxes.value.slice(5));

const items = [
  {
    title: "Home",
    disabled: false,
    href: "/",
  },
  {
    title: "Products",
    disabled: true,
    href: "/products",
  },
];
</script>

<style>
.show_more {
  display: flex !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 10px;
}
.show_more .v-expansion-panel-title__icon {
  margin: 0 !important;
  margin-inline-start: 0 !important;
}
</style>
