<template>
  <div class="column items-center full-width">
    <q-img
      :src="Logo"
      style="max-width: 379px; max-height: 106px; height: 100%; width: 100%"
    />

    <div
      class="items-center full-width q-px-lg q-mt-xl"
      style="display: flex; gap: 12px"
    >
      <div class="bg-primary" style="height: 1px; flex: 1"></div>
      <q-icon name="mdi-chevron-down" size="lg" color="warning" />
      <div class="bg-primary" style="height: 1px; flex: 1"></div>
    </div>

    <div class="text-body1 q-my-lg text-primary" style="font-weight: 400">
      Informe o seu e-mail para redefinir sua senha
    </div>

    <DefaultForm class="full-width q-px-lg column q-gutter-y-lg q-mt-xs" @submit.prevent="emit('submit', email)">
      <DefaultInput
        v-model="email"
        type="email"
        lazy-rules
        :label="$t('common.terms.email')"
        :rules="[inputRules.required]"
        :error="!!emailError"
        :error-message="emailError"
        @update:model-value="emit('clear-error')"
      />

      <div>
        <q-btn
          class="full-width q-mt-md"
          color="primary-2"
          label="Continuar"
          size="md"
          padding="sm"
          type="submit"
          :loading
        >
          <template #loading>
            <q-spinner />
          </template>
        </q-btn>
      </div>
    </DefaultForm>
  </div>
</template>

<script setup>
import Logo from "src/assets/images/logo.svg";
import DefaultInput from "src/components/defaults/DefaultInput.vue";
import { useInputRules } from "src/composables/useInputRules";
import { ref } from "vue";

defineProps({
  loading: Boolean,
  emailError: { type: String, default: "" },
});

const emit = defineEmits(["submit", "clear-error"]);

const email = ref("");
const { inputRules } = useInputRules();
</script>
