<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
      <div class="col-lg-12">
        <div class="ibox float-e-margins">
          <!-- <div class="ibox-title">
            <h5>{{'reconciliation.title' | translate}}</h5>
          </div> -->
          <div class="ibox-content">
            <mat-horizontal-stepper labelPosition="bottom" #stepper [linear]="true" (selectionChange)="selectionChange($event)">
  
              <mat-step state="info">
                <ng-template matStepLabel>
                  <span class="font-bold">{{'label.general-information.title' | translate}}</span>
                  <div class="font-size-description" [title]="'label.general-information.description' | translate">
                    {{'label.general-information.description' | translate}}
                  </div>
                </ng-template>
                <byte-ca-general-information [stepper]="stepper"></byte-ca-general-information>
              </mat-step>
              <!--
              <mat-step state="connections">
                <ng-template matStepLabel>
                  <span class="font-bold">{{'label.connections.title' | translate}}</span>
                  <div class="font-size-description" [title]="'label.connections.description' | translate">
                    {{'label.connections.description' | translate}}
                  </div>
                </ng-template>
                <byte-es-connections [stepper]="stepper" (onDeleteConnection)="onDeleteConnection($event)"></byte-es-connections>
              </mat-step>
  
              <mat-step state="steps">
                <ng-template matStepLabel>
                  <span class="font-bold">{{'label.steps.title' | translate}}</span>
                  <div class="font-size-description" [title]="'label.steps.description' | translate">
                    {{'label.steps.description' | translate}}
                  </div>
                </ng-template>
                <byte-es-steps [stepper]="stepper"></byte-es-steps>
              </mat-step>

              <mat-step state="summary">
                <ng-template matStepLabel>
                  <span class="font-bold">{{'label.summary.title' | translate}}</span>
                  <div class="font-size-description" [title]="'label.summary.description' | translate">
                    {{'label.summary.description' | translate}}
                  </div>
                </ng-template>
                <byte-es-summary [stepper]="stepper"></byte-es-summary>
              </mat-step>
              -->
  
              <ng-template matStepperIcon="info">
                <mat-icon>info</mat-icon>
              </ng-template>
              <!--
              <ng-template matStepperIcon="connections">
                <mat-icon>dns</mat-icon>
              </ng-template>
              <ng-template matStepperIcon="steps">
                <mat-icon>device_hub</mat-icon>
              </ng-template>              
              <ng-template matStepperIcon="summary">
                <mat-icon>done_all</mat-icon>
              </ng-template>
              -->
            </mat-horizontal-stepper>
  
          </div>
        </div>
      </div>
    </div>
  </div>
  