<template>
  <div class="base-input">
    <label>
      {{ label }}
      <div class="input-wrapper">
        <input
          v-bind="$attrs"
          :name="name"
          :type="type"
          v-model="model"
          :placeholder="placeholder"
          autocomplete="off"
          class="base-input-field"
        />
        <slot name="icon" />
      </div>
      <slot name="pwdReset"/>
      <div class="message">
        <slot name="message"></slot>
      </div>
    </label>
  </div>
</template>

<script setup lang="ts">
const model = defineModel<string>()

defineOptions({
  inheritAttrs: false
})

defineProps<{
  label: string
  name: string
  type?: string
  placeholder?: string
  displayPwdReset?:boolean
}>()
</script>

<style scoped lang="scss">
.input-wrapper {
  position: relative;
}

.base-input {
  --input-bg: #ffffff;
  --input-border: #00aeff;
  --input-hover-bg: #e0e0e0;
  --input-text: #003e7c;
}

.base-input label {
  margin-bottom: 1em;
  display: block;
  color: #003e7c;
  font-family: 'Quicksand', Arial, Helvetica, sans-serif;
}

.base-input-field {
  display: block;
  margin: 5px 0;
  width: 100%;
  padding: 0.75em 1.5em;
  background: var(--input-bg);
  border: none;
  border-bottom: 2px solid var(--input-border);
  border-left: 2px solid var(--input-border);
  box-sizing: border-box;
  color: var(--input-text);
}

.base-input-field:hover,
.base-input-field:focus {
  background: var(--input-hover-bg);
}

.message {
  min-height: 1.4em;
}

.message :deep(.error) {
  color: #ca0d00;
  font-size: 0.9em;
  font-weight: 600;
  margin-left: 1em;
}

.message :deep(.success) {
  color: #00ca22;
  font-size: 0.9em;
  font-weight: 600;
  margin-left: 1em;
}

/* Styles spécifiques à l’email */
:deep(.mail-is-valid) {
  --input-border: #00ca22;
}

:deep(.mail-is-invalid) {
  --input-border: #ca0d00;
}
</style>
