<div class="login-card text-center">
  <mat-card appearance="raised" [style.margin-top]="cardTopMargin">
    <div>
      <app-logo [darkContext]="false" [linkOptions]="logoLinkOptions" [customStyle]="{
            width: '140px',
            height: '70px',
            marginBottom: '20px'
          }"></app-logo>
    </div>
    <mat-card-title class="text-left">
      <span class="card-title" i18n>Login</span>
    </mat-card-title>
    <form *ngIf="!auth.userData.disable_fleio_authentication" [formGroup]="loginForm" (ngSubmit)="login()">
      <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>
      <mat-card-content>
        <div class="text-left"
             *ngIf="auth.feature('demo') && auth.feature('ui.core.demo-login-staff')" i18n>
          Access demo account with email <strong>demoadmin&#64;demo.fleio.com</strong>, password
          <strong>demoadmin</strong>
        </div>
        <div class="text-left"
             *ngIf="auth.feature('demo') && auth.feature('ui.core.demo-login-enduser')" i18n>
          Access demo account with email <strong>demo&#64;demo.fleio.com</strong>, password <strong>demo</strong>
        </div>
        <app-form-errors #formErrors [formGroup]="loginForm"></app-form-errors>
        <mat-form-field class="full-width fl-margin-top">
          <mat-label i18n>Email address</mat-label>
          <input matInput placeholder="Email address" i18n-placeholder autocapitalize="none"
                 type="text" formControlName="email" name="email"
                 [cdkTrapFocusAutoCapture]="true" [cdkTrapFocus]="false"
                 required>
          <mat-error i18n>This field is required!</mat-error>
        </mat-form-field>
        <p>{{loginForm.errors}}</p>
        <mat-form-field class="full-width">
          <mat-label i18n>Password</mat-label>
          <input matInput #password placeholder="Password" i18n-placeholder
                 type="password" formControlName="password" name="password" required>
          <mat-error i18n>This field is required!</mat-error>
        </mat-form-field>
        <mat-slide-toggle [color]="'primary'" class="fl-margin-top-medium" formControlName="rememberMe"
                          i18n>Remember me
        </mat-slide-toggle>
      </mat-card-content>
      <mat-card-actions class="fl-block">
        <button mat-raised-button [color]="'primary'" type="submit" class="login-button" i18n>Sign in</button>
        <div *ngIf="auth.feature('ui.core.register') && auth.feature('clients&users.signup')">
          <a [routerLink]="config.getPanelUrl('signup')" mat-flat-button i18n>Create new account</a>
        </div>
        <div *ngIf="auth.feature('enduser.allow_changing_password') ||
          auth.feature('ui.core.allow-changing-password')">
          <a [routerLink]="config.getPanelUrl('reset')" mat-flat-button i18n>Forgot password</a>
        </div>
      </mat-card-actions>
    </form>
    <ng-container *ngIf="auth.userData.enable_saml2_single_sign_on">
      <mat-card-actions layoutDirection="column" appLayoutGap="10px">
        <a *ngFor="let idp of auth.userData.saml2_identity_providers" class="saml-link" mat-button mat-stroked-button
           color="primary" href="{{this.auth.userData.saml2_login_url}}?idp={{idp.entity_id}}&next={{nextUrl}}">
          <div layoutDirection="row" layoutAlign="start center" appLayoutGap="5px">
            <img *ngIf="idp.image_url" [ngSrc]="idp.image_url" [width]="25" [height]="25" loading="eager" alt="">
            <p appFlex="auto" class="fl-no-margin-bottom fl-no-margin-top" i18n>Sign in with {{ idp.label }}</p>
          </div>
        </a>
      </mat-card-actions>
    </ng-container>
  </mat-card>
  <span id="x-content-id" hidden>7fb6f0ec28584b75a3d43ccdb5c0bee6</span>
  <a class="powered-by-link" href="https://fleio.com" target="_blank"
     *ngIf="auth && auth.userData && !auth.userData.is_white_label" i18n>
    Powered by Fleio
  </a>
</div>
