<form class="PopupContainer" #popupForm="ngForm">
  <a class="messageOverHeader">{{overHeader}}</a>
  <h3 mat-dialog-title class="messageBoxHeader">{{header}}</h3>

  <mat-dialog-content class="PopupContent">
    <mat-spinner class="spinner" *ngIf=this.showSpinner mode="indeterminate"></mat-spinner>
    <hensel-input
      class="login-name"
      #loginname
      placeholder="{{environment['caption_loginname'] ?? 'core.caption.username' | translate}}"
      [readonly]=this.showSpinner
      (keydown.enter)="$event.preventDefault();"
      required>
    </hensel-input>

    <!-- <mat-form-field [class]="'login-name '+(!loginname.value?'mat-form-field-invalid':'')" #loginname_mff>
      <input matInput
        #loginname
        placeholder="{{environment['caption_loginname'] ?? 'core.caption.username' | translate}}"
        [readonly]=this.showSpinner
        (keydown.enter)="$event.preventDefault();"
        required>
    </mat-form-field> -->
    <hensel-input class="login-password"
      #passw
      placeholder="{{'core.caption.password' | translate}}"
      [type]="hide ? 'password' : 'text'"
      [readonly]=this.showSpinner
      required
      (keydown.enter)="$event.stopPropagation(); login(loginname.value, passw.value);">
      <button hensel-input-suffix mat-icon-button
        (click)="hide = !hide"
        attr.aria-label="{{'core.caption.hidepassword'| translate}}"
        [attr.aria-pressed]="hide" tabindex="-1"
        [disabled]=this.showSpinner>
        <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
      </button>
    </hensel-input>

    <!-- <mat-form-field class="login-password">
      <input matInput
        #passw
        placeholder="{{'core.caption.password' | translate}}"
        [type]="hide ? 'password' : 'text'"
        [readonly]=this.showSpinner
        required
        (keydown.enter)="$event.stopPropagation(); login(loginname.value, passw.value);">
      <button mat-icon-button matSuffix
        (click)="hide = !hide"
        attr.aria-label="{{'core.caption.hidepassword'| translate}}"
        [attr.aria-pressed]="hide" tabindex="-1"
        [disabled]=this.showSpinner>
        <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
      </button>
    </mat-form-field> -->

    <button mat-stroked-button color="accent" class="login-btn-block"
      [disabled]="this.showSpinner||!loginname.value||!passw.value"
      (click)="login(loginname.value, passw.value)">
      {{'core.caption.login'| translate}}
    </button>

    <p *ngIf="!!errorMsg" class="login-error">
      {{ errorMsg }}
    </p>

  </mat-dialog-content>

</form>
