<div class="header">
  <mat-progress-bar mode="determinate" [value]="stepProgress" class="stepper-progress-bar"></mat-progress-bar>
</div>

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <vitamui-common-stepper (selectionChange)="stepIndex=$event.selectedIndex">

    <cdk-step>
      <div class="content">
        <h4 i18n="Create context title@@contextCreateTitle">Création d'un contexte applicatif</h4>
        <h5 i18n="Create context title@@contextCreateSubTitle1">Informations</h5>

        <div class="form-group">
          <vitamui-common-slide-toggle [formControl]="statusControl" checked="form.controls.status.value === 'ACTIVE'">
            Contexte applicatif  <span *ngIf="form.controls.status.value === 'INACTIVE'">in</span>actif
          </vitamui-common-slide-toggle>
        </div>

        <div class="d-flex">
          <vitamui-common-input formControlName="name" minlength="2" maxlength="100" required placeholder="Nom"
                                i18n-placeholder="Name@@contextCreateNamePlaceholder">
            <ng-container *ngIf="form.get('name')?.touched">
              <vitamui-common-input-error *ngIf="!!form.get('name')?.errors?.required"
                                          i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
              <vitamui-common-input-error *ngIf="!!form?.get('name')?.errors?.nameExists"
                                          i18n="Name exists error hint@@formErrorNameExists">Nom déjà utilisé</vitamui-common-input-error>
            </ng-container>
          </vitamui-common-input>
        </div>

        <div class="d-flex" *ngIf="isSlaveMode">
          <vitamui-common-input formControlName="identifier" minlength="2" maxlength="100" required placeholder="Identifiant" i18n-placeholder="Identifier@@contextCreateIdentifierPlaceholder">
            <ng-container *ngIf="form.get('identifier')?.touched">
              <vitamui-common-input-error *ngIf="!!form.get('identifier')?.errors?.required"
                                          i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
              <vitamui-common-input-error *ngIf="!!form?.get('identifier')?.errors?.identifierExists"
                                          i18n="Name exists error hint@@formErrorIdentifierExists">Identifiant déjà utilisé</vitamui-common-input-error>
            </ng-container>
          </vitamui-common-input>
        </div>

        <div class="form-group">

          <mat-form-field class="vitamui-mat-select">
            <mat-select formControlName="securityProfile" placeholder="Profil de sécurité" required="required"
                        i18n-placeholder="Application@@securityProfileFormApplicationPlaceholder" panelclass="vitamui-mat-select">
              <mat-option *ngFor='let profile of securityProfiles' [value]="profile.key">{{profile.label}}</mat-option>
            </mat-select>
            <div class="select-arrow">
              <i class="material-icons">keyboard_arrow_down</i>
            </div>
          </mat-form-field>


          <!-- Make a Add button to add an element -->
          <!-- Show tags of selected elements -->
        </div>

        <div class="form-group">
          <vitamui-common-slide-toggle formControlName="enableControl">
            Contrôle sur les tenants
          </vitamui-common-slide-toggle>
          <i class="material-icons field-tooltip" *ngIf="form?.controls.enableControl?.value === false"
             matTooltip="Aucun contrôle n'est effectué sur les tenants et contrats définis dans le contexte applicatif quand une application externe se connecte au service"
             matTooltipClass="vitamui-tooltip">info</i>
          <i class="material-icons field-tooltip" *ngIf="form?.controls.enableControl?.value === true"
             matTooltip="Un contrôle est effectué sur les tenants et contrats définis dans le contexte applicatif quand une application externe se connecte au service"
             matTooltipClass="vitamui-tooltip">info</i>
        </div>

        <div class="actions">
          <button type="button" class="btn primary" cdkStepperNext [disabled]="firstStepInvalid()"
                  i18n="Next step button label@@contextCreateNextButton">Suivant</button>
          <button type="button" class="btn cancel" (click)="onCancel()"
                  i18n="Cancel context creation@@contextCreateCancelButton">Annuler</button>
        </div>
      </div>
    </cdk-step>
    <cdk-step>
      <div class="content">
        <h4 i18n="Create context title@@contextCreateTitle1">Création d'un contexte applicatif</h4>
        <h5 i18n="Create context title@@contextCreateTitle2">Permissions</h5>


        <div class="form-group">
          <app-context-edit-permission formControlName="permissions"
            (changeOrganisations)="onChangeOrganisations($event)"></app-context-edit-permission>
          <div *ngIf="isPermissionsOnMultipleOrganisations">
            <span class="error-message" i18n="Multiple organisation warning hint@@formWarningMultipleOrganisations">Attention vous avez renseigné deux organisations différentes</span>
          </div>
          <ng-container>
            <span class="error-message" *ngIf="!!form.get('permissions')?.errors?.permissionsTenant"
                                        i18n="Required tenant error hint@@formErrorRequiredField">Un tenant doit être sélectionné pour chaque permission</span>
            <span class="error-message" *ngIf="!!form.get('permissions')?.errors?.noPermissions"
                                        i18n="Required permissions error hint@@formErrorRequiredField">Au moins une permission doit être renseignée</span>

          </ng-container>
        </div>

        <button type="submit" class="btn primary" [disabled]="lastStepInvalid()"
                i18n="Finish context creation button@@contextCreateFinishButton">Terminer</button>
        <button type="button" class="btn cancel" (click)="onCancel()"
                i18n="Cancel context creation@@contextCreateCancelButton">Annuler</button>
        <button type="button" class="back" cdkStepperPrevious>
          <i class="material-icons">arrow_back</i>
          <ng-container i18n="Previous step button label@@contextCreateBackButton">Retour</ng-container>
        </button>
      </div>
    </cdk-step>
  </vitamui-common-stepper>
</form>