<template>
  <v-sheet color="white" elevation="4" height="300">
    <slot name="dash-title">
      <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-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="$emit('dash-refresh', id)">
              <v-list-item-icon>
                <v-icon>$ayiSync</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ $ay.t("Refresh") }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>

            <v-list-item @click="$emit('dash-move-start', id)">
              <v-list-item-icon>
                <v-icon>$ayiStepBackward</v-icon>
              </v-list-item-icon>
            </v-list-item>

            <v-list-item @click="$emit('dash-move-back', id)">
              <v-list-item-icon>
                <v-icon>$ayiBackward</v-icon>
              </v-list-item-icon>
            </v-list-item>

            <v-list-item @click="$emit('dash-move-forward', id)">
              <v-list-item-icon>
                <v-icon>$ayiForward</v-icon>
              </v-list-item-icon>
            </v-list-item>

            <v-list-item @click="$emit('dash-move-end', id)">
              <v-list-item-icon>
                <v-icon>$ayiStepForward</v-icon>
              </v-list-item-icon>
            </v-list-item>

            <v-list-item @click="$emit('dash-remove', id)">
              <v-list-item-icon>
                <v-icon>$ayiTrashAlt</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ $ay.t("Remove") }}</v-list-item-title>
              </v-list-item-content>
            </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: () => ({}),
  props: {
    id: {
      type: String,
      required: true
    },
    title: String,
    moreUrl: String
  },
  methods: {
   
  }
};
</script>
