<template>
  <v-sheet color="transparent ">
    <breadcrumbs :breadcrumbsItems="items" />
    <v-row justify="center">
      <v-col cols="11">
        <!-- map -->
        <v-card color="red" height="457"></v-card>
        <v-sheet>
          <v-card-title class="text-center d-flex justify-center pa-8">
            <h6
              class="text-h6 text-primary me-5 font-weight-regular"
              style="letter-spacing: 3px !important"
            >
              Our Distributors
            </h6>
          </v-card-title>
          <v-expansion-panels class="ga-3 py-9 distributors" flat>
            <v-expansion-panel
              flat
              v-for="n in 5"
              :key="n"
              class="text-center"
              title="Ankara"
              text=" Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima"
            >
            </v-expansion-panel>
          </v-expansion-panels>
        </v-sheet>
      </v-col>
    </v-row>
  </v-sheet>
</template>

<script setup>
import breadcrumbs from "@/core/components/breadcrumbs.vue";
const items = [
  {
    title: "Home",
    disabled: false,
    href: "/",
  },
  {
    title: "Distributors",
    disabled: true,
    href: "/distributors",
  },
];
</script>

<style>
.distributors .v-expansion-panel-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 20px !important;
}

.distributors .v-expansion-panel-title__icon {
  margin-left: 15px !important;
}
</style>
