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

withDefaults(defineProps<Props>(), {
  backLabel: '返回',
})

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

<template>
  <v-container fluid class="pt-2 px-1">
    <v-card class="mb-2">
      <v-card-title class="text-title-large bg-primary">{{ 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-row density="compact" align="center">
          <slot name="filters" />
          <v-col cols="12" md="auto" class="d-md-flex justify-md-end pr-md-2">
            <v-btn color="primary" :loading="loading" @click="emit('search')">查詢</v-btn>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <v-card v-if="$slots.results">
      <v-card-text>
        <slot name="results" />
      </v-card-text>
    </v-card>

    <slot name="sections" />

    <v-row class="pa-4">
      <v-btn variant="tonal" @click="emit('back')">{{ backLabel }}</v-btn>
    </v-row>
  </v-container>
</template>
