<template>
  <v-card width="100%">
    <v-toolbar>
      <template v-if="$slots.header">
        <slot name="header" :title="title" :onClose="onClose" />
      </template>
      <template v-else>
        <v-row no-gutters class="fill-height px-6" align="center">
          <span class="font-weight-bold text-h5 text-capitalize">{{
            title
          }}</span>
        </v-row>
      </template>
    </v-toolbar>

    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0" :class="contentNoPadding ? 'pa-0' : ''">
      <slot name="content" />
    </v-card-text>

    <v-toolbar class="pa-0" density="compact">
      <v-row no-gutters>
        <v-col :cols="(canUpdate || canDelete) ? 6 : 12" class="pa-0">
          <v-btn
            block
            variant="text"
            class="text-none"
            size="large"
            @click="emit('close')"
            height="48"
          >
            Close
          </v-btn>
        </v-col>

        <v-col v-if="canUpdate || canDelete" cols="6" class="pa-0" >
          <v-menu contained>
            <template #activator="{ props }">
              <v-btn
                block
                variant="flat"
                color="black"
                class="text-none"
                height="48"
                :disabled="disabled"
                v-bind="props"
                tile
              >
                More actions
              </v-btn>
            </template>

            <v-list class="pa-0">
              <v-list-item v-if="canUpdate" @click="emit('edit')">
                <v-list-item-title class="text-subtitle-2">
                  {{ editButtonLabel }}
                </v-list-item-title>
              </v-list-item>

              <v-list-item v-if="canDelete" @click="emit('delete')" class="text-red">
                <v-list-item-title class="text-subtitle-2">
                  {{ deleteButtonLabel }}
                </v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-col>
      </v-row>
    </v-toolbar>
  </v-card>
</template>

<script setup lang="ts">
const prop = defineProps({
  canUpdate: {
    type: Boolean,
    default: true,
  },
  canDelete: {
    type: Boolean,
    default: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  editButtonLabel: {
    type: String,
    default: "Edit",
  },
  deleteButtonLabel: {
    type: String,
    default: "Delete",
  },
  title: {
    type: String,
    default: "Details",
  },
  contentNoPadding: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["close", "edit", "delete"]);
const { canUpdate, editButtonLabel, deleteButtonLabel, title, disabled } = prop;
</script>

<style scoped></style>
