<template>
  <q-card-section class="full-width">
    <div class="text-text">
      <span class="font12 fontbold">{{ $t("common.terms.email") }}</span>
    </div>

    <q-input
      v-model="email"
      class="bg-surface q-mt-sm"
      hide-bottom-space
      input-class="text-text font12 fontregular"
      lazy-rules
      no-error-icon
      outlined
      rounded
      :bottom-slots="false"
      :placeholder="$t('common.terms.email')"
      :rules="!phone ? [inputRules.requiredHideMessage, inputRules.email] : []"
    />

    <div class="col-12 row q-py-lg">
      <div class="col-5 q-my-auto">
        <q-separator class="q-my-sm bg-grey-4" />
      </div>

      <span class="col text-center text-text font12">
        {{ $t("common.ui.misc.or") }}
      </span>

      <div class="col-5 q-my-auto">
        <q-separator class="q-my-sm bg-grey-4" />
      </div>
    </div>

    <div class="text-text">
      <span class="font12 fontbold">{{ $t("common.terms.phone") }}</span>

      <span class="font12 fontregular">
        {{ " (" + $t("common.terms.celular") + ")" }}
      </span>
    </div>

    <q-input
      v-model="phone"
      class="bg-surface q-mt-sm"
      hide-bottom-space
      input-class="text-text font12 fontregular"
      lazy-rules
      mask="(##) #####-####"
      no-error-icon
      :bottom-slots="false"
      :placeholder="$t('common.terms.phone')"
      :rules="!email ? [inputRules.requiredHideMessage, inputRules.email] : []"
    />
  </q-card-section>
</template>

<script setup>
import { useInputRules } from "src/composables/useInputRules";

const email = defineModel("email", {
  required: true,
  type: String,
});

const phone = defineModel("phone", {
  required: true,
  type: String,
});

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