<script setup lang="ts">
import headLinks from "@haditha/json/haditha/headLinks";
import headMetas from "@haditha/json/haditha/headMetas";

definePageMeta({
  layout: false,
  name: "hadithaLogin",
});
useHead({
  title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | ورود`,
  meta: [
    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
    ...headMetas,
  ],
  bodyAttrs: {
    class: import.meta.env.VITE_HADITH_SYSTEM,
  },
  link: headLinks,
});

const stepOne = ref(true);

// components declaration
const HadithaLayout = defineAsyncComponent(
  () => import("@haditha/layouts/HadithaLayout.vue")
);
const NavigationMenu = defineAsyncComponent(
  () => import("@haditha/components/haditha/NavigationMenu.vue")
);
const EnterMobile = defineAsyncComponent(
  () => import("@haditha/components/haditha/login/EnterMobile.vue")
);
const EnterVerifyCode = defineAsyncComponent(
  () => import("@haditha/components/haditha/login/EnterVerifyCode.vue")
);
</script>

<template>
  <HadithaLayout>
    <div class="haditha-login-page h-full">
      <div class="page-container pt-20 h-full">
        <navigation-menu></navigation-menu>

        <UContainer
          ui="{
          base: 'sm:px-6 lg:px-4',
        }"
          class="page-inner-container sm:px-6 lg:px-4 h-full"
        >
          <div
            class="page-content flex flex-col items-center justify-center h-full"
          >
            <enter-mobile
              v-if="stepOne"
              @next-step="stepOne = !stepOne"
            ></enter-mobile>
            <enter-verify-code v-else></enter-verify-code>
          </div>
        </UContainer>
      </div>
    </div>
  </HadithaLayout>
</template>

<style scoped>
.haditha-login-page {
  background: #f7fffd;

  .page-container {
    .page-inner-container {
      margin: auto;
      /* max-width: 512px; */
      max-width: 300px;
      /* height: 125px; */
      gap: 24px;

      .title {
        margin-bottom: 1.2em;
        font-family: var(--font);
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
        letter-spacing: 0%;

        /* Fallback color */
        color: #4d00ff;

        /* Gradient background */
        background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%);

        /* Clip the background to the text */
        background-clip: text;
        -webkit-background-clip: text; /* For Safari */

        /* Make the text transparent */
        color: transparent;
        -webkit-text-fill-color: transparent; /* For Safari */
      }

      .description {
        font-family: var(--font);
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0%;
        color: #626b84;
        margin-bottom: 5em; /* 70px */
      }
    }
  }
}
</style>

<style>
.haditha-login-page {
  .page-container {
    .page-inner-container {
      .input-elem {
        input {
          width: 48;
          height: 53px;
          justify-content: space-between;
          border-radius: 12px;
          border-width: 0.3px;
          padding: 16px;
          background: #ffffff;
          border: 0.3px solid #d9d9d9;
          box-shadow: 0px 1px 4px 0px #0000000d;

          font-family: var(--font);
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0%;
          text-align: center;
          color: var(--ui-color-two);
        }
      }

      .submit-btn {
        width: 480;
        height: 48px;
        gap: 4px;
        padding-top: 9.1px;
        padding-right: 32px;
        padding-bottom: 9.1px;
        padding-left: 32px;
        border-radius: 12px;
        border-width: 0.3px;

        background: linear-gradient(102.02deg, #4be8ae 7.38%, #00a762 91.78%);
        border: 0.3px solid #d9d9d9;
        box-shadow: 0px 1px 4px 0px #0000000d;
      }

      .root-pin-input {
        direction: ltr;

        .base-pin-input {
          width: 56px;
          height: 53px;
          justify-content: space-between;
          border-radius: 12px;
          border-width: 0.3px;
          padding: 16px;

          border: 0.3px solid #d9d9d9;
          box-shadow: 0px 1px 4px 0px #0000000d;

          font-family: var(--font);
          font-weight: 400;
          font-size: 16px;
          line-height: 100%;
          letter-spacing: 0%;
          text-align: center;

          color: var(--ui-color-two);
        }
      }
    }
  }
}
</style>
