<template>
  <v-sheet color="white" elevation="4" height="300">
    <slot name="dash-title">
      <!-- <div class="mx-2 mt-1 text-subtitle-1 text-md-h6 text-xl-h4">
        {{ title }}

        <v-btn icon class="float-right">
          <v-icon>$ayiEllipsisV</v-icon>
        </v-btn>
      </div> -->

      <v-toolbar flat dense>
        <v-toolbar-title> {{ title }}</v-toolbar-title>

        <v-spacer></v-spacer>

        <!-- <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn> -->

        <!-- <v-btn icon>
          <v-icon>$ayiEllipsisV</v-icon>
        </v-btn> -->
        <v-menu bottom left>
          <template v-slot:activator="{ on, attrs }">
            <v-btn icon v-bind="attrs" v-on="on">
              <v-icon>$ayiEllipsisV</v-icon>
            </v-btn>
          </template>

          <v-list>
            <v-list-item @click="removeItem">
              <v-list-item-icon>
                <v-icon>$ayiTrashAlt</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ $ay.t("Delete") }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item v-for="(item, i) in items" :key="i">
              <v-list-item-title @click="menuItemClick(item)">{{
                item.name
              }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-toolbar>
    </slot>
    <slot name="main"
      ><div class="ml-4 mt-1 d-flex justify-center align-center">
        <div>
          CONTENT HERE
        </div>
      </div></slot
    >
  </v-sheet>
</template>
<script>
export default {
  data: () => ({
    items: [
      { name: "Click Me", value: 0 },
      { name: "Click Me", value: 1 },
      { name: "Click Me", value: 2 },
      { name: "Click Me 2", value: 3 }
    ]
  }),
  props: {
    id: {
      type: String,
      required: true
    },
    title: String,
    moreUrl: String
  },
  methods: {
    removeItem() {
      this.$emit("dash-remove", this.id);
    },
    menuItemClick(item) {
      console.log(item);
    }
  }
};
</script>
