<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="questions">
                <ng-template matStepLabel>
                  <span class="font-bold">{{'label.questions.title' | translate}}</span>
                  <div class="font-size-description" [title]="'label.questions.description' | translate">
                    {{'label.questions.description' | translate}}
                  </div>
                </ng-template>
                <byte-ca-frequent-questions [stepper]="stepper"></byte-ca-frequent-questions>
              </mat-step>
  
              <mat-step state="deployment-channels">
                <ng-template matStepLabel>
                  <span class="font-bold">{{'label.deployment-channels.title' | translate}}</span>
                  <div class="font-size-description" [title]="'label.deployment-channels.description' | translate">
                    {{'label.deployment-channels.description' | translate}}
                  </div>
                </ng-template>
                <byte-ca-deployment-channels [stepper]="stepper"></byte-ca-deployment-channels>
              </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="questions">
                <mat-icon>dns</mat-icon>
              </ng-template>
              <ng-template matStepperIcon="deployment-channels">
                <mat-icon>chat</mat-icon>
              </ng-template>              
              <!--
              <ng-template matStepperIcon="summary">
                <mat-icon>done_all</mat-icon>
              </ng-template>
              -->
            </mat-horizontal-stepper>
  
          </div>
        </div>
      </div>
    </div>
  </div>
  