<template>
  <v-sheet color="white" elevation="4" height="300" style="overflow: hidden;">
    <!-- todo: need type icon and badge with count options in title bar (badge is icon?) -->
    <slot name="dash-title">
      <v-toolbar flat dense>
        <template v-if="hasUrl">
          <v-btn text icon :to="moreUrl">
            <template v-if="showCount && count > 0">
              <v-badge overlap>
                <template v-slot:badge>
                  {{ count }}
                </template>
                <v-icon>{{ icon }}</v-icon>
              </v-badge>
            </template>
            <template v-else>
              <v-icon>{{ icon }}</v-icon>
            </template>
          </v-btn>
        </template>
        <template v-else>
          <template v-if="showCount && count > 0">
            <v-badge overlap class="mr-4">
              <template v-slot:badge>
                {{ count }}
              </template>
              <v-icon>{{ icon }}</v-icon>
            </v-badge>
          </template>
          <template v-else>
            <v-icon class="mr-4">{{ icon }}</v-icon>
          </template>
        </template>
        <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 align-center">
        <div>
          <span class="orange--text"
            >CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT</span
          >
        </div>
      </div></slot
    >
  </v-sheet>
</template>
<script>
export default {
  data: () => ({}),
  props: {
    id: {
      type: String,
      required: true
    },
    title: String,
    moreUrl: String,
    showCount: Boolean,
    count: { type: Number, default: 0 },
    updateFrequency: { type: Number, default: 60000 },
    icon: String
  },
  computed: {
    hasUrl: function() {
      return this.moreUrl && this.moreUrl != "";
    }
  },
  methods: {}
};
</script>
