@let vm = (model$ | async)!;
<div class="h-screen bg-surface-50">
  <div class="flex justify-center items-center h-full">
    <div
      class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border w-full lg:max-w-200"
    >
      <div class="text-center mb-8">
        <img
          src="assets/images/MUSA/logo.png"
          alt="Image"
          height="50"
          class="mb-4 m-auto max-w-60"
        />
        <div
          class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4"
        >
          {{
            vm.showRecovery
              ? 'Recupera Password'
              : vm.showReset
                ? 'Imposta nuova password'
                : ''
          }}
        </div>
      </div>

      <form
        [formGroup]="recoveryForm"
        (submit)="submit()"
        *ngIf="vm.showRecovery"
      >
        <label
          for="email"
          class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
          >Email<span class="text-error">
            *<small
              *ngIf="
                recoveryForm.controls.email.errors?.['required'] && vm.submitted
              "
            >
              Email obbligatoria</small
            >
            <small
              *ngIf="
                recoveryForm.controls.email.errors?.['email'] && vm.submitted
              "
            >
              L'Email non è in un formato valido</small
            ></span
          ></label
        >

        <input
          type="email"
          pInputText
          formControlName="email"
          placeholder="Inserisci la tua email"
          class="w-full mb-4"
          [ngClass]="{
            'ng-dirty ng-invalid':
              recoveryForm.controls.email.invalid && vm.submitted,
          }"
        />

        <div class="flex items-center justify-end mb-12">
          <a
            [routerLink]="['/login']"
            class="font-medium no-underline ml-2 text-primary text-right cursor-pointer"
            >Torna al login</a
          >
        </div>

        <button
          pButton
          pRipple
          type="submit"
          class="w-full mb-4"
          [loading]="vm.isLoading"
          icon="pi pi-user"
          [label]="!vm.isLoading ? 'Recupera' : 'Recupero in corso'"
          [disabled]="vm.isLoading"
        ></button>
      </form>

      <form
        [formGroup]="setPasswordForm"
        (submit)="submitSetPassword()"
        *ngIf="vm.showReset"
      >
        <label
          for="password"
          class="block text-surface-900 dark:text-surface-0 font-medium mb-2"
          >Nuova Password<span class="text-error">
            *<small
              *ngIf="
                setPasswordForm.controls.password.errors?.['required'] &&
                setPasswordForm.controls.password.dirty
              "
              class="text-error"
              >Inserisci la nuova password</small
            >
          </span></label
        >

        <p-password
          styleClass="w-full"
          inputStyleClass="w-full"
          formControlName="password"
          [feedback]="true"
          [toggleMask]="true"
          mediumRegex="^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{8,})."
          strongRegex="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*\W).{8,}$"
          weakLabel="Troppo semplice"
          mediumLabel="Facile da indovinare"
          strongLabel="Difficile da indovinare"
          promptLabel="Scrivi la password"
          placeholder="Inserisci la nuova password"
        >
          <ng-template pTemplate="header">
            <h6>Scegli una password</h6>
          </ng-template>
          <ng-template pTemplate="footer">
            <p-divider></p-divider>
            <ul class="pl-2 ml-2 mt-0 list-none" style="line-height: 1.5">
              <li>
                <i
                  [ngClass]="
                    recoveryService.stringMatch(
                      'a-z',
                      setPasswordForm.controls.password.value
                    )
                      ? 'pi pi-check mr-2 text-green-400'
                      : 'pi pi-times mr-2 text-primary'
                  "
                ></i
                >Almeno una lettera minuscola
              </li>
              <li>
                <i
                  [ngClass]="
                    recoveryService.stringMatch(
                      'A-Z',
                      setPasswordForm.controls.password.value
                    )
                      ? 'pi pi-check mr-2 text-green-400'
                      : 'pi pi-times mr-2 text-primary'
                  "
                ></i
                >Almeno una lettera maiuscola o un numero
              </li>
              <li>
                <i
                  [ngClass]="
                    recoveryService.stringMatch(
                      'MIN_8',
                      setPasswordForm.controls.password.value
                    )
                      ? 'pi pi-check mr-2 text-green-400'
                      : 'pi pi-times mr-2 text-primary'
                  "
                ></i
                >Minimo 8 caratteri
              </li>
            </ul>
          </ng-template>
        </p-password>
        <small
          *ngIf="
            setPasswordForm.controls.password.invalid &&
            !setPasswordForm.controls.password.errors?.['required'] &&
            setPasswordForm.controls.password.dirty
          "
          class="text-error"
          >La password deve essere di almeno 8 caratteri, deve contenere almeno
          una lettera minuscola, una maiuscola e un numero</small
        >

        <label
          for="password"
          class="block text-surface-900 dark:text-surface-0 font-medium mb-2 mt-4"
          >Ripeti la Password<span class="text-error">
            *<small
              *ngIf="
                setPasswordForm.controls.confirmPassword.errors?.['required'] &&
                setPasswordForm.controls.confirmPassword.dirty
              "
              class="text-error"
              >Ripeti la password</small
            >
          </span></label
        >
        <p-password
          styleClass="w-full"
          inputStyleClass="w-full"
          formControlName="confirmPassword"
          placeholder="Ripeti la password"
          [feedback]="false"
          [toggleMask]="true"
        ></p-password>
        <small
          *ngIf="
            setPasswordForm.controls.confirmPassword.errors?.['mustMatch'] &&
            setPasswordForm.controls.confirmPassword.dirty
          "
          class="text-error"
          >Le due password inserite non corrispondono</small
        >

        <div class="flex items-center justify-end mb-12 mt-4">
          <a
            [routerLink]="['/login']"
            class="font-medium no-underline ml-2 text-primary text-right cursor-pointer"
            >Torna al login</a
          >
        </div>

        <button
          pButton
          pRipple
          type="submit"
          class="w-full mb-4"
          [loading]="vm.isLoading"
          icon="pi pi-user"
          [label]="!vm.isLoading ? 'Imposta password' : 'Salvataggio in corso'"
          [disabled]="vm.isLoading"
        ></button>
      </form>

      <div
        *ngIf="vm.isLoading && !vm.showRecovery && !vm.showReset"
        class="col-12 p-0 text-center"
      >
        <p-progressSpinner
          styleClass="w-4rem h-4rem"
          strokeWidth="6"
          fill="transparent"
          animationDuration=".5s"
        ></p-progressSpinner>
      </div>

      <p-messages
        [(value)]="messages"
        [enableService]="false"
        [closable]="false"
        [showTransitionOptions]="showTransitionOptions"
        [hideTransitionOptions]="'0ms'"
      ></p-messages>
    </div>
  </div>
</div>
