<template>
  <InputBase
  v-model="model"
  v-bind="$props"
  :type="seePwd ? 'text' : 'password'"
  @blur="seePwd = false"
  >
    <template #icon>
      <font-awesome-icon
      class="eye"
      icon="fa-solid fa-eye"
      @click="seePwd = true"
      :class="{ hide: seePwd }"
      />
      <font-awesome-icon
      class="eye"
      icon="fa-solid fa-eye-slash"
      @click="seePwd = false"
      :class="{ hide: !seePwd }"
      />
    </template>
    <template #pwdReset>
        <div v-if="displayPwdReset" class="pwd-reset-container">
        <NuxtLink :to="localePath('passwordResetRequest')">
          {{ $t('loginPage.passwordResetRequest') }}
        </NuxtLink>
      </div>
    </template>
    <template #message>
      <slot name="message"></slot>
    </template>
  </InputBase>
</template>

<script setup lang="ts">
const localePath = useLocalePath()
const model = defineModel<string>()
const seePwd = ref(false)

withDefaults(defineProps<{
  label: string
  name: string
  placeholder?: string
  displayPwdReset?:boolean
}>(), {
  // Valeurs par défault
  displayPwdReset: false,
})
</script>

<style lang="scss">

.eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #003e7c;
  font-size: 1.1em;
  cursor: pointer;
  user-select: none;
}

.eye.hide {
  display: none;
}

</style>