<script setup lang="ts">
interface Props {
  title: string
  error?: string
  loading?: boolean
  message?: string
  resetLabel?: string
  submitLabel?: string
}

withDefaults(defineProps<Props>(), {
  resetLabel: '清除',
  submitLabel: '存檔',
})

const emit = defineEmits<{
  back: []
  reset: []
  submit: []
}>()
</script>

<template>
  <v-form @submit.prevent="emit('submit')">
    <v-container fluid class="pt-2 px-1">
      <v-card class="mb-2">
        <v-card-title class="bg-primary text-title-large text-center py-2">
          {{ title }}
        </v-card-title>
        <v-card-text class="pa-4">
          <v-alert v-if="error" class="mb-4" type="error" variant="tonal">{{ error }}</v-alert>
          <v-alert v-if="message" class="mb-4" type="success" variant="tonal">
            {{ message }}
          </v-alert>
          <slot name="fields" />
        </v-card-text>
      </v-card>

      <slot name="sections" />

      <v-card>
        <v-card-title class="text-title-medium font-weight-bold">配合事項</v-card-title>
        <v-card-text>
          <slot name="notices" />
        </v-card-text>
        <v-row justify="center" class="pa-4 ga-2">
          <v-btn type="submit" variant="elevated" color="primary" :loading="loading">
            {{ submitLabel }}
          </v-btn>
          <v-btn type="button" variant="tonal" @click="emit('reset')">{{ resetLabel }}</v-btn>
        </v-row>
      </v-card>
    </v-container>
  </v-form>
</template>
