<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <p i18n>Has Root ever been enabled: {{rootEnabled | yesNo}}</p>
  <p *ngIf="rootPassword" i18n>Root password: {{rootPassword}}</p>

  <div layoutDirection="column">
    <form [formGroup]="enableRootForm" (ngSubmit)="enableRoot($event)" layoutDirection="column">
      <app-form-errors #formErrors [formGroup]="enableRootForm"></app-form-errors>
      <mat-form-field class="half-width fl-margin-bottom" subscriptSizing="dynamic">
        <mat-label i18n>Root password</mat-label>
        <input matInput placeholder="Root password" i18n-placeholder
               [type]="(enableRootForm.controls.root_password.value.length > 0 && !previewPassword) ? 'password' : 'text'"
               formControlName="root_password">
        <mat-hint i18n>Unless provided, a password will be generated and shown to you.</mat-hint>
        <mat-error>{{enableRootForm.controls.root_password.errors | errorFormatter}}</mat-error>
        <a mat-icon-button matSuffix
           (mousedown)="previewPassword = true"
           (mouseup)="previewPassword = false"
           fl-tooltip="Hold button to reveal password" i18n-fl-tooltip>
          <mat-icon>
            visibility
          </mat-icon>
        </a>
      </mat-form-field>
      <div layoutAlign="row" [appLayoutGap]="'10px'">
        <button mat-button color="primary" [disabled]="enablingRoot || disablingRoot"
                (click)="enableRoot($event)">
          Enable root
        </button>
        <button *ngIf="rootEnabled" mat-button color="primary" [disabled]="disablingRoot || enablingRoot"
                (click)="disableRoot($event)">
          Disable root
        </button>
      </div>

      <div class="fl-margin-top" *ngIf="authSvc.feature('ui.staff')">
        <button mat-button [disabled]="loadingHistory" (click)="loadRootEnabled($event)"
                i18n>Load root-enabled history</button>
        <div *ngIf="rootEnabledHistory && !loadingHistory">
          <p class="fl-bold" i18n>Root-enabled history:</p>
          <p i18n>ID: {{rootEnabledHistory.id}}</p>
          <p i18n>User: {{rootEnabledHistory.user}}</p>
          <p i18n>Enabled: <app-date-displayer [date]="rootEnabledHistory.enabled" withTime></app-date-displayer></p>
        </div>
      </div>
    </form>
  </div>
</div>
