<script lang='ts' setup>
import { Field, Form } from "vee-validate";

const { t } = useI18n();
</script>

<template>
  <IonPage>
    <IonHeader class="ion-no-border">
      <IonToolbar class="ion-toolbar">
        <ui-back-button slot="start" />
      </IonToolbar>
    </IonHeader>
    <IonContent :fullscreen="true" class="ion-padding">
      <div class="text-2xl font-semibold mb-5">
        {{ t('auth.signup.title') }}
      </div>

      <Form>
        <Field v-slot="{ field, errorMessage }" name="email" type="email">
          <div class="mb-4">
            <ui-input
              v-bind="field"
              :placeholder="t('auth.signup.enterEmail')"
              type="email"
            />
            <div v-if="errorMessage" class="text-xs text-red-500 mt-1">
              {{ errorMessage }}
            </div>
          </div>
        </Field>
      </Form>
    </IonContent>
  </IonPage>
</template>

<style lang='css' scoped></style>
