<script setup lang="ts">
const email = ref('')
</script>

<template>
  <CoreFormGroup label="Рабочая почта" hint="Пришлём код подтверждения" label-for="sandbox-form-email">
    <CoreInput id="sandbox-form-email" v-model="email" />
  </CoreFormGroup>
</template>

<script setup lang="ts">
import { maxLength, required } from '@regle/rules'

const { t } = useI18n()
const form = reactive({ email: '', comment: '' })
const { r$ } = useRegle(form, {
  email: { required },
  comment: { maxLength: maxLength(200) },
})
const email = useFormField(r$, 'email')
const comment = useFormField(r$, 'comment')
</script>

<template>
  <CoreFormGroup
    :label="t('dev.sandbox.regle.email')"
    required
  >
    <template #default="{ describedBy }">
      <CoreInput
        id="regle-form-email"
        v-model="form.email"
        :error="email.error"
        :described-by="describedBy"
      />
    </template>
  </CoreFormGroup>
  <CoreFormGroup
    :label="t('dev.sandbox.regle.comment')"
    :hint="t('dev.sandbox.regle.commentHint')"
  >
    <template #default="{ describedBy }">
      <CoreTextarea
        v-model="form.comment"
        :error="comment.error"
        :described-by="describedBy"
      />
    </template>
  </CoreFormGroup>
</template>