<div class="fl-content fl-content-min-height">
  <div class="fl-margin-bottom" *ngIf="status && status.enabled">
    <span class="fl-tag fl-light-green-bg" *ngIf="status && status.enabled" i18n>ENABLED</span>
    <span class="fl-tag fl-margin-left-small" *ngIf="status && status.default" i18n>DEFAULT</span>
  </div>
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <div *ngIf="status && !status.enabled">
    <div>
      <p i18n>
        To enable SMS authenticator on your profile, request a code to be sent to your mobile phone
        number, enter it in the input below and submit the form.
      </p>
      <button mat-button *ngIf="userProfile && userProfile.mobile_phone_number"
              (click)="requestCode()" color="primary" i18n>
        Request code
      </button>
    </div>
  </div>
  <div *ngIf="userProfile && !userProfile.mobile_phone_number">
    <p class="fl-bold" i18n>You must first set a valid phone number.</p>
    <div layoutDirection="row" appLayoutGap="10px">
      <app-phone-input [control]="profileForm.controls.phone"></app-phone-input>
      <button class="fl-margin-top-medium phone-btn" mat-button (click)="savePhone()" i18n>
        Set phone number
      </button>
    </div>
  </div>
  <div *ngIf="status && status.enabled" class="fl-margin-bottom">
    <p class="fl-detail" *ngIf="userProfile" i18n>SMS authenticator is enabled. You will receive a verification code on your
      mobile phone number ({{userProfile.mobile_phone_number}}) when trying to login.</p>
  </div>
  <div *ngIf="status && !status.enabled" class="fl-margin-top-medium fl-margin-bottom">
    <form appFormSubmit (ngSubmit)="enable()"
          [formGroup]="smsForm">
      <app-form-errors #formErrors [formGroup]="smsForm"></app-form-errors>
      <mat-form-field appFlex="50" xsFlex="100">
        <mat-label i18n>Code</mat-label>
        <input matInput placeholder="Code" i18n-placeholder type="text" pattern="[0-9]*" inputmode="numeric"
               maxlength="6" formControlName="code" autocapitalize="none" required>
        <mat-error>{{fieldErrors['code'] | fieldRequired}}</mat-error>
      </mat-form-field>
    </form>
  </div>
  <div layoutAlign="end">
    <button [routerLink]="config.getPrevUrl('sfa/options')" mat-button i18n>Cancel</button>
    <button (click)="disable()" mat-button color="primary" *ngIf="status && status.enabled" i18n>
      Disable SMS authenticator
    </button>
    <button (click)="makeDefault()" mat-button color="primary" *ngIf="status && status.enabled && !status.default" i18n>
      Set as default
    </button>
    <button (click)="enable()" mat-button color="primary" *ngIf="status && !status.enabled" i18n>
      Enable SMS authenticator
    </button>
  </div>
</div>
