<form
  role="form"
  class="loginForm"
  (ngSubmit)="changePassword()"
  #changePasswordForm="ngForm"
  novalidate
>

  <div
    class="legend form-block center"
    translate
  >
    Change password
  </div>

  <c8y-form-group class="tenantField" id="tenantField" *ngIf="loginService.showTenant()">
    <label translate>Tenant ID</label>
    <input
      [(ngModel)]="model.tenantId"
      #tenantId="ngModel"
      type="text"
      name="tenantId"
      autocapitalize="off"
      autocorrect="off"
      class="form-control"
      placeholder="{{ 'Tenant ID' | translate }}"
      required
    />
  </c8y-form-group>

  <c8y-form-group>
    <label translate>Email address</label>
    <input
      [(ngModel)]="model.email"
      #email="ngModel"
      type="text"
      name="email"
      autocapitalize="off"
      autocorrect="off"
      class="form-control"
      placeholder="{{ 'Email address' | translate }}"
      email
      required
      [readonly]="emailReadOnly"
    />
  </c8y-form-group>

  <div class="row content-flex-50">
    <div class="col-7">
      <c8y-form-group>
        <label translate>New password</label>
        <input
          [(ngModel)]="model.newPassword"
          #newPassword="ngModel"
          type="password"
          name="newPassword"
          class="form-control"
          placeholder="{{ 'New password' | translate }}"
          [pattern]="passwordPattern"
          autocomplete="new-password"
          [passwordStrengthEnforced]='passwordStrengthEnforced'
          required
        />
        <c8y-messages>
          <c8y-message
            name="pattern"
            [text]="loginService.ERROR_MESSAGES.pattern_newPassword"
          ></c8y-message>
        </c8y-messages>
      </c8y-form-group>

      <c8y-form-group>
        <label translate>Confirm password</label>
        <input
          [(ngModel)]="model.newPasswordConfirm"
          #newPasswordConfirm="ngModel"
          type="password"
          name="newPasswordConfirm"
          class="form-control"
          placeholder="{{ 'Confirm password' | translate }}"
          passwordConfirm="newPassword"
          autocomplete="new-password"
          required
        />
        <c8y-messages>
          <c8y-message
            name="passwordConfirm"
            [text]="loginService.ERROR_MESSAGES.passwordConfirm"
          ></c8y-message>
        </c8y-messages>
      </c8y-form-group>
    </div>
    <div class="col-5">
      <c8y-password-strength
        [password]="model.newPassword"
        [hidden]="!model.newPassword"
      ></c8y-password-strength>
      <c8y-password-check-list
        class="m-t-32"
        [password]="model.newPassword"
        [hidden]="!model.newPassword || !passwordStrengthEnforced"
      ></c8y-password-check-list>
    </div>
  </div>

  <button
    title="{{ 'Set password' | translate }}"
    [disabled]="!changePasswordForm.form.valid || isLoading"
    type="submit"
    class="btn btn-primary btn-lg btn-block form-group"
    translate
  >
    Set password
  </button>
</form>