@if (form$ | async; as form) {
  <cnsl-detail-layout [hasBackButton]="true" title="{{ 'USER.PASSWORD.TITLE' | translate }}">
    <p class="password-info cnsl-secondary-text" sub>{{ 'USER.PASSWORD.DESCRIPTION' | translate }}</p>
    @if (id$ | async; as id) {
      <form [formGroup]="form" (ngSubmit)="setInitialPassword(id, form)">
        @if (username$ | async; as username) {
          <input class="hiddeninput" type="hidden" autocomplete="username" name="username" type="text" [value]="username" />
        }
        <div class="password-content">
          <div class="side-by-side">
            <cnsl-form-field class="formfield">
              <cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
              <input cnslInput autocomplete="off" name="password" formControlName="password" type="password" />
            </cnsl-form-field>
            <cnsl-form-field class="formfield">
              <cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
              <input cnslInput autocomplete="off" name="passwordRepeat" formControlName="confirmPassword" type="password" />
            </cnsl-form-field>
          </div>
          @if (passwordPolicy$ | async; as passwordPolicy) {
            <div class="validation">
              <cnsl-password-complexity-view [policy]="passwordPolicy" [password]="password(form)">
              </cnsl-password-complexity-view>
            </div>
          }
        </div>
        <button class="submit-button" [disabled]="form.invalid" mat-raised-button color="primary">
          {{ 'USER.PASSWORD.SET' | translate }}
        </button>
      </form>
    }
    @if ((id$ | async) === undefined && (user$ | async); as user) {
      <form [formGroup]="form" (ngSubmit)="setPassword(form, user)">
        @if (username$ | async; as username) {
          <input class="hiddeninput" type="hidden" autocomplete="username" name="username" type="text" [value]="username" />
        }
        <div class="password-content">
          <cnsl-form-field class="formfield">
            <cnsl-label>{{ 'USER.PASSWORD.OLD' | translate }}</cnsl-label>
            <input cnslInput autocomplete="off" name="password" type="password" formControlName="currentPassword" />
          </cnsl-form-field>
          @if (passwordPolicy$ | async; as passwordPolicy) {
            <div class="validation between">
              <cnsl-password-complexity-view [policy]="passwordPolicy" [password]="newPassword(form)">
              </cnsl-password-complexity-view>
            </div>
          }
          <div class="side-by-side">
            <cnsl-form-field class="formfield">
              <cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
              <input cnslInput autocomplete="off" name="new password" type="password" formControlName="newPassword" />
            </cnsl-form-field>
            <cnsl-form-field class="formfield">
              <cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
              <input
                cnslInput
                autocomplete="off"
                name="password repeating"
                type="password"
                formControlName="confirmPassword"
              />
            </cnsl-form-field>
          </div>
        </div>
        <button class="submit-button" [disabled]="form.invalid" mat-raised-button color="primary">
          {{ 'USER.PASSWORD.RESET' | translate }}
        </button>
      </form>
    }
  </cnsl-detail-layout>
}