<template>
  <div>
    <LayoutParametersSection>
      <UiFormCreation
        :model="AttendanceBookingReason"
        go-back-route="/parameters/attendances"
      >
        <template #default="{ entity }">
          <v-container :fluid="true" class="container">
            <v-row>
              <v-col cols="12" sm="6" />
            </v-row>
            <v-row>
              <v-col cols="12" sm="6">
                <UiInputText
                  v-model="entity.reason"
                  field="reason"
                  :rules="rules()"
                />
              </v-col>
            </v-row>
          </v-container>
        </template>
      </UiFormCreation>
    </LayoutParametersSection>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import AttendanceBookingReason from '~/models/Booking/AttendanceBookingReason'

definePageMeta({
  name: 'new_attendance_booking_reason',
})

const i18n = useI18n()

const rules = () => [
  (reason: string | null) =>
    (reason !== null && reason.length > 0) || i18n.t('please_enter_a_value'),
]
</script>
