<div>
  <div class="d-flex justify-content-center">
    <div class="col-md-8">
      <h1 data-cy="registerTitle" jhiTranslate="register.title">Registo</h1>

      @if (success()) {
        <div class="alert alert-success" jhiTranslate="register.messages.success">
          <strong>Registo efetuado com sucesso!</strong> Por favor verifique o seu email para confirmar a conta.
        </div>
      }

      @if (error()) {
        <div class="alert alert-danger" jhiTranslate="register.messages.error.fail">
          <strong>Erro ao realizar o registo!</strong> Por favor tente novamente mais tarde.
        </div>
      }

      @if (errorUserExists()) {
        <div class="alert alert-danger" jhiTranslate="register.messages.error.userexists">
          <strong>Utilizador já registado!</strong> Por favor escolha outro.
        </div>
      }

      @if (errorEmailExists()) {
        <div class="alert alert-danger" jhiTranslate="register.messages.error.emailexists">
          <strong>O email já está em uso!</strong> Por favor escolha outro.
        </div>
      }

      @if (doNotMatch()) {
        <div class="alert alert-danger" jhiTranslate="global.messages.error.dontmatch">
          A palavra-passe e a sua confirmação devem ser iguais!
        </div>
      }
    </div>
  </div>

  <div class="d-flex justify-content-center">
    <div class="col-md-8">
      @if (!success()) {
        <form name="form" (ngSubmit)="register()" [formGroup]="registerForm">
          <div class="mb-3">
            <label class="form-label" for="login" jhiTranslate="global.form.username.label">Nome de utilizador</label>
            <input
              type="text"
              class="form-control"
              id="login"
              name="login"
              placeholder="{{ 'global.form.username.placeholder' | translate }}"
              formControlName="login"
              data-cy="username"
              #login
            />

            @if (registerForm.get('login')!.invalid && (registerForm.get('login')!.dirty || registerForm.get('login')!.touched)) {
              <div>
                @if (registerForm.get('login')?.errors?.required) {
                  <small class="form-text text-danger" jhiTranslate="register.messages.validate.login.required"
                    >O utilizador é obrigatório.</small
                  >
                }

                @if (registerForm.get('login')?.errors?.minlength) {
                  <small class="form-text text-danger" jhiTranslate="register.messages.validate.login.minlength"
                    >O utilizador deve ter pelo menos 1 caracter</small
                  >
                }

                @if (registerForm.get('login')?.errors?.maxlength) {
                  <small class="form-text text-danger" jhiTranslate="register.messages.validate.login.maxlength"
                    >O utilizador não pode ter mais de 50 caracteres</small
                  >
                }

                @if (registerForm.get('login')?.errors?.pattern) {
                  <small class="form-text text-danger" jhiTranslate="register.messages.validate.login.pattern"
                    >Your username is invalid.</small
                  >
                }
              </div>
            }
          </div>

          <div class="mb-3">
            <label class="form-label" for="email" jhiTranslate="global.form.email.label">Email</label>
            <input
              type="email"
              class="form-control"
              id="email"
              name="email"
              placeholder="{{ 'global.form.email.placeholder' | translate }}"
              formControlName="email"
              data-cy="email"
            />

            @if (registerForm.get('email')!.invalid && (registerForm.get('email')!.dirty || registerForm.get('email')!.touched)) {
              <div>
                @if (registerForm.get('email')?.errors?.required) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.email.required">O email é obrigatório.</small>
                }

                @if (registerForm.get('email')?.errors?.invalid) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.email.invalid">Email inválido.</small>
                }

                @if (registerForm.get('email')?.errors?.minlength) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.email.minlength"
                    >O email deve ter pelo menos 5 caracteres</small
                  >
                }

                @if (registerForm.get('email')?.errors?.maxlength) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.email.maxlength"
                    >O email não pode ter mais de 50 caracteres</small
                  >
                }
              </div>
            }
          </div>

          <div class="mb-3">
            <label class="form-label" for="password" jhiTranslate="global.form.newpassword.label">Nova palavra-passe</label>
            <input
              type="password"
              class="form-control"
              id="password"
              name="password"
              placeholder="{{ 'global.form.newpassword.placeholder' | translate }}"
              formControlName="password"
              data-cy="firstPassword"
            />

            @if (registerForm.get('password')!.invalid && (registerForm.get('password')!.dirty || registerForm.get('password')!.touched)) {
              <div>
                @if (registerForm.get('password')?.errors?.required) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.newpassword.required"
                    >A palavra-passe é obrigatória.</small
                  >
                }

                @if (registerForm.get('password')?.errors?.minlength) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.newpassword.minlength"
                    >A palavra-passe deve ter pelo menos 4 caracteres</small
                  >
                }

                @if (registerForm.get('password')?.errors?.maxlength) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.newpassword.maxlength"
                    >A palavra-passe não pode ter mais de 50 caracteres</small
                  >
                }
              </div>
            }

            <jhi-password-strength-bar [passwordToCheck]="registerForm.get('password')!.value"></jhi-password-strength-bar>
          </div>

          <div class="mb-3">
            <label class="form-label" for="confirmPassword" jhiTranslate="global.form.confirmpassword.label"
              >Confirmação de nova palavra-passe</label
            >
            <input
              type="password"
              class="form-control"
              id="confirmPassword"
              name="confirmPassword"
              placeholder="{{ 'global.form.confirmpassword.placeholder' | translate }}"
              formControlName="confirmPassword"
              data-cy="secondPassword"
            />

            @if (
              registerForm.get('confirmPassword')!.invalid &&
              (registerForm.get('confirmPassword')!.dirty || registerForm.get('confirmPassword')!.touched)
            ) {
              <div>
                @if (registerForm.get('confirmPassword')?.errors?.required) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.confirmpassword.required"
                    >A confirmação da palavra-passe é obrigatória.</small
                  >
                }

                @if (registerForm.get('confirmPassword')?.errors?.minlength) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.confirmpassword.minlength"
                    >A confirmação da palavra-passe deve ter pelo menos 4 caracteres</small
                  >
                }

                @if (registerForm.get('confirmPassword')?.errors?.maxlength) {
                  <small class="form-text text-danger" jhiTranslate="global.messages.validate.confirmpassword.maxlength"
                    >A confirmação da palavra-passe não pode ter mais de 50 caracteres</small
                  >
                }
              </div>
            }
          </div>

          <button
            type="submit"
            [disabled]="registerForm.invalid"
            class="btn btn-primary"
            data-cy="submit"
            jhiTranslate="register.form.button"
          >
            Registar
          </button>
        </form>
      }

      <div class="mt-3 alert alert-warning">
        <span jhiTranslate="global.messages.info.authenticated.prefix">Para </span>
        <a class="alert-link" routerLink="/login" jhiTranslate="global.messages.info.authenticated.link">entrar</a
        ><span jhiTranslate="global.messages.info.authenticated.suffix"
          >, utilize as seguintes contas:<br />- Administrador (utilizador=&quot;admin&quot; e palavra-passe=&quot;admin&quot;) <br />-
          Utilizador (utilizador=&quot;user&quot; e palavra-passe=&quot;user&quot;).</span
        >
      </div>
    </div>
  </div>
</div>
