<section>
  <div class="container vertical-spacing">
    <!-- SUCCESSFULLY REGISTERED -->
    <ng-container *ngIf="isRegistered">
      <!-- success message -->
      <div class="alert alert-success" role="alert">
        <p>
          <strong> {{ 'User.Congratulations' | translate }}! </strong>
          {{ 'User.SuccessfullRegistration' | translate }}
        </p>
        <p class="mb-0">
          {{ 'User.ActivationEmailSent' | translate }}
        </p>
      </div>

      <!-- login page redirection -->
      <p class="text-center">
        <a [routerLink]="['/!user', '!login'] | localize" class="btn btn-primary">
          {{ 'Action.Login' | translate }}
        </a>
      </p>
    </ng-container>

    <!-- REGISTRATION FORM -->
    <div class="row" *ngIf="!isRegistered">
      <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
        <form class="auth-form" (ngSubmit)="onSubmit()" [formGroup]="registrationForm">
          <h1 class="heading heading--md heading--separator">
            {{ 'User.Registration' | translate }}
          </h1>

          <!-- api notifications  -->
          <app-notifications aria-live="assertive"></app-notifications>

          <!-- EMAIL -->
          <div
            class="form-group"
            [ngClass]="{ 'form-group-invalid': registrationForm.controls.email.invalid && registrationForm.controls.email.touched }"
          >
            <label for="email">
              E-mail <small>({{ 'Validation.RequiredField' | translate | lowercase }})</small>
            </label>

            <input
              type="email"
              class="form-control"
              id="email"
              placeholder="{{ 'Action.Enter' | translate }} {{ 'User.Email' | translate | lowercase }}"
              formControlName="email"
              [attr.aria-invalid]="registrationForm.controls.email.invalid && registrationForm.controls.email.touched"
            />

            <!-- Email - required error -->
            <small
              class="form-text text-err"
              role="alert"
              id="email_required_error"
              aria-live="polite"
              *ngIf="registrationForm.controls.email.invalid && registrationForm.controls.email.touched"
              @toggleVertically
            >
              {{ 'Validation.RequiredEmail' | translate }}
            </small>
          </div>

          <!-- PASSWORD -->
          <div
            class="form-group"
            [ngClass]="{ 'form-group-invalid': registrationForm.controls.password1.invalid && registrationForm.controls.password1.touched }"
          >
            <label for="password1">
              {{ 'User.Password' | translate }}
              <small>({{ 'Validation.RequiredField' | translate | lowercase }})</small>
            </label>

            <!-- Password with hint (tooltip) -->
            <div style="position: relative">
              <input
                type="password"
                class="form-control"
                id="password1"
                placeholder="{{ 'Action.Enter' | translate }} {{ 'User.Password' | translate | lowercase }}"
                [attr.aria-label]="'Validation.VarPasswordPolicy' | translate: { param: passwordMinLength }"
                [attr.aria-invalid]="registrationForm.controls.password1.invalid && registrationForm.controls.password1.touched"
                formControlName="password1"
                (focus)="showPasswordHint = true"
                (blur)="showPasswordHint = false"
                (mouseenter)="showPasswordHint = true"
                (mouseleave)="showPasswordHint = false"
              />

              <!-- Password policy description (tooltip) -->
              <span class="hint" role="tooltip" id="password_policy" *ngIf="showPasswordHint">
                <small>
                  {{ 'Validation.VarPasswordPolicy' | translate: { param: passwordMinLength } }}
                </small>
              </span>
            </div>

            <!-- Password - required error -->
            <small
              class="form-text text-err"
              role="alert"
              id="password_required_error"
              aria-live="polite"
              *ngIf="registrationForm.controls.password1.invalid && registrationForm.controls.password1.touched"
              @toggleVertically
            >
              "{{ 'User.Password' | translate }}"
              {{ 'Validation.IsRequired' | translate }}
            </small>

            <!-- visual password validator -->
            <app-visual-password-validator [control]="registrationForm.get('password1')"></app-visual-password-validator>
          </div>

          <!-- PASSWORD CONFIRMATION -->
          <div
            class="form-group"
            [ngClass]="{
              'form-group-invalid':
                (registrationForm.controls.password2.invalid && registrationForm.controls.password2.touched) ||
                registrationForm.hasError('notEqualValues')
            }"
          >
            <label for="password2">
              {{ 'User.RetypePassword' | translate }}
            </label>

            <!-- Password confirmation -->
            <input
              type="password"
              class="form-control"
              id="password2"
              placeholder="{{ 'User.RetypePassword' | translate }}"
              formControlName="password2"
              autocomplete="off"
              [attr.aria-invalid]="
                (registrationForm.controls.password2.invalid && registrationForm.controls.password2.touched) ||
                registrationForm.hasError('notEqualValues')
              "
            />

            <!-- Password confirmation - required error -->
            <small
              class="form-text text-err"
              id="password2_required_error"
              role="alert"
              aria-live="polite"
              *ngIf="
                (registrationForm.controls.password2.invalid && registrationForm.controls.password2.touched) ||
                registrationForm.hasError('notEqualValues')
              "
              @toggleVertically
            >
              {{ 'Validation.RequiredPasswordConfirmation' | translate }}
            </small>
          </div>

          <!-- CHECKBOXES-->
          <!-- regulations checkbox-->
          <div class="form-group form-check mb-0">
            <input type="checkbox" class="form-check-input" id="regulationsConsent" formControlName="regulationsConsent" />

            <label class="form-check-label" for="regulationsConsent">
              {{ 'User.RegulationsCheckboxText' | translate }}
            </label>

            <!-- required error -->
            <small
              class="form-text text-err"
              role="alert"
              aria-live="polite"
              *ngIf="registrationForm.controls.regulationsConsent.invalid && registrationForm.controls.regulationsConsent.touched"
              @toggleVertically
            >
              {{ 'Validation.RegulationsCheckbox' | translate }}
            </small>
          </div>

          <!-- rodo checkbox-->
          <div class="form-group form-check mb-4">
            <input type="checkbox" class="form-check-input" id="rodoConsent" formControlName="rodoConsent" />

            <label class="form-check-label" for="rodoConsent">
              {{ 'User.RodoCheckboxText' | translate }}
            </label>

            <!-- required error -->
            <small
              class="form-text text-err"
              role="alert"
              aria-live="polite"
              *ngIf="registrationForm.controls.rodoConsent.invalid && registrationForm.controls.rodoConsent.touched"
              @toggleVertically
            >
              {{ 'Validation.RodoCheckbox' | translate }}
            </small>
          </div>

          <!-- RODO & SUBMIT -->
          <div class="d-flex flex-column flex-sm-row align-items-center justify-content-between">
            <!-- Links to GDPR and regulations -->
            <div class="d-flex flex-column">
              <a href="/regulations" target="_blank">
                {{ 'Menu.Regulations' | translate }}

                <span class="visually-hidden">
                  {{ 'SkipTo.NewWindow' | translate }}
                </span>
              </a>

              <button type="button" class="btn btn-link pl-0 pt-0" (click)="onRodoModalOpen($event)" #rodoModalTrigger>
                {{ 'Rodo.Title' | translate }}
              </button>
            </div>

            <!-- fake button to indicate 'disabled' state -->
            <button
              type="button"
              class="btn btn-secondary disabled align-content-center"
              *ngIf="!registrationForm.valid"
              [attr.aria-label]="'Validation.InvalidEmailOrPassword' | translate: { param: 'User.CreateAccount' | translate }"
              [attr.aria-disabled]="true"
            >
              {{ 'User.CreateAccount' | translate | uppercase }}
            </button>

            <!-- submit form -->
            <button type="submit" class="btn btn-primary mt-2" *ngIf="registrationForm.valid">
              {{ 'User.CreateAccount' | translate | uppercase }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <ng-template #rodoModalTemplate>
    <app-rodo-modal (isModalClosed)="onRodoModalClose()"></app-rodo-modal>
  </ng-template>
</section>
