<template>
  <UiContainer class="flex py-10 sm:py-14 gap-10">
    <div
      class="hidden xl:block rounded-2xl min-w-[50%] h-[830px]"
      :style="{
        backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }"
    />
    <div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12">
      <div class="space-y-[55px]">
        <div
          class="flex flex-col-reverse sm:flex-row justify-between items-start gap-7 sm:items-center"
        >
          <h2 class="h2-bold-bounded">
            {{ $t("reset_password") }}
          </h2>
          <button
            class="whitespace-nowrap h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer"
          >
            {{ $t("back_to_home") }}
          </button>
        </div>
        <div class="space-y-[30px]">
          <p>{{ component.section_lang_data.reset_password_description }}</p>
          <div class="space-y-[15px]">
            <p class="pl-6">
              {{ $t("email") }}
            </p>
            <input
              :placeholder="$t('email')"
              type="text"
              class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
            >
          </div>
        </div>
      </div>
      <div class="pt-[25px] sm:pt-12 flex justify-center w-full">
        <UiButtonArrow type="fill"
                       :arrow="true"
        >
          {{
            $t("confirm")
          }}
        </UiButtonArrow>
      </div>
    </div>
  </UiContainer>
</template>

<script lang="ts" setup>
defineProps<{ component: Component }>()
type Component = {
  image_collection: string
  section_id: string
  section_img: string
  section_lang_data: {
    reset_password_description: string
  }
}
</script>
