<template>
    <div>
    <ul>{{ $t('passwordCheckerShallContain') }}
      <div :class="[ passwordCheck.isNumberOfCaracteresValid() ? 'has-success' : 'has-error' ]">
        <font-awesome-icon	
          icon="fa-regular fa-circle-check"
          v-bind:class="{'hide': !passwordCheck.isNumberOfCaracteresValid() || passwordCheck.password == ''}"
          />
        <font-awesome-icon
          icon="fa-regular fa-circle-xmark"
          v-bind:class="{ 'hide': passwordCheck.isNumberOfCaracteresValid() }"
          />
        <li :class="[passwordCheck.isNumberOfCaracteresValid() ? 'has-success' : 'has-error']">
          {{ $t('passwordChecker8-22') }}
        </li>
      </div>
      
      <div :class="[passwordCheck.isCapitalizeCaractereValid() ? 'has-success' : 'has-error']">
        <font-awesome-icon	
          icon="fa-regular fa-circle-check"
          v-bind:class="{ 'hide': !passwordCheck.isCapitalizeCaractereValid() || passwordCheck.password == '' }"
          style="color:green" />
        <font-awesome-icon
          icon="fa-regular fa-circle-xmark"
          v-bind:class="{'hide': passwordCheck.isCapitalizeCaractereValid() }"
          style="color:red" />
        <li :class="[passwordCheck.isCapitalizeCaractereValid() ? 'has-success' : 'has-error']">
          {{ $t('passwordCheckerUppercase') }}
        </li>
      </div>
      
      <div :class ="[passwordCheck.isMinimizeCaractereValid() ? 'has-success' : 'has-error']">
        <font-awesome-icon	
          icon="fa-regular fa-circle-check"
          v-bind:class="{ 'hide': !passwordCheck.isMinimizeCaractereValid() || passwordCheck.password == '' }"
          style="color:green" />
        <font-awesome-icon
          icon="fa-regular fa-circle-xmark"
          v-bind:class="{ 'hide': passwordCheck.isMinimizeCaractereValid() }"
          style="color:red" />
        <li :class="[passwordCheck.isMinimizeCaractereValid() ? 'has-success' : 'has-error']">
          {{ $t('passwordCheckerLowercase') }}
        </li>
      </div>
      
      <div :class ="[passwordCheck.isNumberValid() ? 'has-success' : 'has-error']">
        <font-awesome-icon	
          icon="fa-regular fa-circle-check"
          v-bind:class="{ 'hide': !passwordCheck.isNumberValid() || passwordCheck.password == '' }"
          style="color:green" />
        <font-awesome-icon
          icon="fa-regular fa-circle-xmark"
          v-bind:class="{ 'hide': passwordCheck.isNumberValid() }"
          style="color:red" />
        <li :class="[passwordCheck.isNumberValid() ? 'has-success' : 'has-error']">
          {{ $t('passwordCheckerNb') }}
        </li>
      </div>
      
      <div :class="[passwordCheck.isSpecialCaractereValid() ? 'has-success' : 'has-error']">
        <font-awesome-icon	
          icon="fa-regular fa-circle-check"
          v-bind:class="{'hide': !passwordCheck.isSpecialCaractereValid()|| passwordCheck.password == '' }"
          style="color:green" />
        <font-awesome-icon
          icon="fa-regular fa-circle-xmark"
          v-bind:class="{ 'hide': passwordCheck.isSpecialCaractereValid()}"
          style="color:red" />
        <li :class="[passwordCheck.isSpecialCaractereValid() ? 'has-success' : 'has-error']">
          {{ $t('passwordCheckerSpecialChar') }}
        </li>
      </div>
    </ul>
  </div>
</template>

<script setup lang="ts">
  const passwordCheck = usePasswordToolBoxStore()
</script>

<style lang="scss" scoped>
.container{
  margin-bottom:1.5em;
  margin-left: 0;
}
ul{
		list-style-type: none;
		font-size: 0.9em;
		color:rgb(0, 128, 0);
    margin:0;
    margin-bottom:1em;
		&>div{
			display: flex;
			align-items: center;
				&.has-error{
				color:red;
				transition: 0.5s;
				transform: rotateX(0deg)
				}
			
			&.has-success{
				color:green;
				transition: 0.5s;
				transform: rotateX(360deg)

			}
		}
	}
	
	li{
			margin-left: 0.5em;
	}
  .hide{
		display: none;
	}
</style>
