<template>
  <v-row no-gutters class="pa-4" justify="center">
    <v-col cols="12" :lg="props.lg" :md="props.md" :sm="props.sm">
      <v-row no-gutters>
        <v-col cols="12">
          <span
            class="font-weight-medium text-subtitle-1 text-decoration-underline cursor-pointer"
            @click="emit('back')"
          >
            Back
          </span>
        </v-col>
        <v-col cols="12">
          <span class="text-h5">{{ props.title }}</span>
        </v-col>

        <v-col cols="12" class="mt-4">
          <slot name="default"> </slot>
        </v-col>

        <v-col cols="12" class="mt-4">
          <slot name="footer"> </slot>
        </v-col>
      </v-row>
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
const emit = defineEmits(["back"]);
const props = defineProps({
  title: {
    type: String,
    default: "Title",
  },
  lg: {
    type: String,
    default: "4",
  },
  md: {
    type: String,
    default: "6",
  },
  sm: {
    type: String,
    default: "6",
  },
  fluid: {
    type: Boolean,
    default: false,
  },
});
</script>
