<div class="fl-content">
  <h3 *ngIf="forStaff" i18n>Create a new SAML2 identity provider for use in staff panel</h3>
  <h3 *ngIf="forEnduser" i18n>Create a new SAML2 identity provider for use in end-user panel</h3>
  <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
    <form appFormSubmit (ngSubmit)="saveSaml2IdentityProvider()" [formGroup]="saml2IdentityProviderForm"
          layoutDirection="column" appFlex="66">
      <!--suppress JSUnusedGlobalSymbols -->
      <app-form-errors #formErrors [formGroup]="saml2IdentityProviderForm"></app-form-errors>
      <div layoutDirection="column">
        <mat-form-field>
          <mat-label i18n>Name</mat-label>
          <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name" required>
          <mat-error>{{fieldErrors['name']}}</mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label i18n>Image URL</mat-label>
          <input matInput placeholder="Image URL" i18n-placeholder type="text" formControlName="image_url">
          <mat-error>{{fieldErrors['image_url']}}</mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label i18n>Label</mat-label>
          <input matInput placeholder="Label" i18n-placeholder type="text" formControlName="label">
          <mat-error>{{fieldErrors['label']}}</mat-error>
        </mat-form-field>
      </div>

      <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="25px">
        <mat-form-field appFlex="auto">
          <mat-label i18n>Metadata URL</mat-label>
          <input matInput placeholder="Metadata URL" i18n-placeholder type="text" formControlName="metadata_url">
          <mat-error>{{backendErrors['metadata_url']}}</mat-error>
        </mat-form-field>
        <button mat-button [color]="'primary'" (click)="fetchMetadata();  $event.preventDefault()"
                [disabled]="!saml2IdentityProviderForm.controls.metadata_url.value"
                class="fl-margin-top-medium" i18n>
          Fetch metadata from URL
        </button>
      </div>

      <mat-form-field>
        <mat-label i18n>Metadata</mat-label>
        <textarea (keydown.control.enter)="saveSaml2IdentityProvider()"
                  matInput rows="10" placeholder="Metadata" i18n-placeholder type="text"
                  formControlName="metadata">
          </textarea>
        <mat-error>{{fieldErrors['metadata']}}</mat-error>
      </mat-form-field>
    </form>
    <div layoutDirection="column" class="hide-xs fl-help-text">
        <h3 i18n>Name</h3>
        <p class="fl-detail" i18n>Internal identity provider name.</p>
        <h3 i18n>Image URL</h3>
        <p class="fl-detail" i18n>URL for an image to display on login form for this identity provider. If you use metadata URL Fleio will attempt to autodetect this.</p>
        <h3 i18n>Label</h3>
        <p class="fl-detail" i18n>A label to display on login form for this identity provider.</p>
        <h3 i18n>Metadata URL</h3>
        <p class="fl-detail" i18n>URL to fetch identity provider metadata from. If fetch is successful it will populate "Metadata" and "Image URL" fields.</p>
        <h3 i18n>Metadata</h3>
        <p class="fl-detail" i18n>Metadata for identity provider in XML format.</p>
    </div>
  </div>
</div>
