<div class="steppers" [class.bg-dark]="dark">
  @if (showHeader) {
    <div class="steppers-header">
      @if (steps) {
        <ul>
          @for (step of steps; track step.id; let i = $index) {
            <li [class.confirmed]="i < activeStep" [class.active]="i === activeStep" [class.no-line]="i === activeStep && steppersNumber">
              @if (step.icon && !steppersNumber) {
                <it-icon [labelWaria]="'it.core.confirmed' | translate" [name]="step.icon"></it-icon>
              }
              @if (steppersNumber) {
                <span class="steppers-number">
                  @if (i < activeStep) {
                    <ng-container *ngTemplateOutlet="checkIcon"></ng-container>
                  } @else {
                    <span class="visually-hidden">{{ 'it.core.step' | translate }} </span>{{ i + 1 }}
                  }
                </span>
              }
              {{ step.label }}
              @if (i < activeStep && !steppersNumber) {
                <ng-container *ngTemplateOutlet="checkIcon"></ng-container>
              }
              @if (i === activeStep) {
                <span class="visually-hidden">{{ 'it.core.active' | translate }}</span>
              }
            </li>
          }
        </ul>
      }
      @if (steps) {
        <span class="steppers-index" aria-hidden="true">
          @if (!steppersNumber) {
            {{ activeStep + 1 + '/' + steps.length }}
          } @else {
            @for (step of steps; track step.id; let i = $index) {
              <span [class.active]="i === activeStep">{{ i + 1 }}</span>
            }
          }
        </span>
      }
    </div>
  }

  @if (steps?.get(activeStep); as step) {
    <div class="steppers-content" aria-live="polite">
      <ng-container *ngTemplateOutlet="step.htmlContent"></ng-container>
    </div>
  }

  @if (showBackButton || showSaveButton || showForwardButton || showConfirmButton || !!progressStyle) {
    <nav class="steppers-nav">
      @if (showBackButton) {
        <button
          type="button"
          itButton="outline-primary"
          size="sm"
          class="steppers-btn-prev"
          [disabled]="disableBackButton"
          (click)="backClick.emit(activeStep)">
          <it-icon [labelWaria]="'it.core.back' | translate" name="chevron-left" color="primary"></it-icon>
          {{ 'it.core.back' | translate }}
        </button>
      }
      @if (!!progressStyle && steps) {
        @if (progressStyle === 'dots') {
          <ul class="steppers-dots">
            @for (step of steps; track step; let i = $index) {
              <li [class.done]="i < activeStep">
                <span class="visually-hidden">
                  {{ 'it.core.step-of' | translate: { current: activeStep + 1, available: steps?.length } }}
                  {{ i < activeStep ? '- ' + ('it.core.confirmed' | translate) : '' }}
                </span>
              </li>
            }
          </ul>
        } @else {
          <div class="steppers-progress">
            <it-progress-bar [color]="progressColor" [value]="(activeStep / (steps?.length || 1)) * 100"></it-progress-bar>
          </div>
        }
      }
      @if (showSaveButton) {
        <button
          type="button"
          itButton="primary"
          size="sm"
          class="steppers-btn-save"
          [progress]="saveLoading"
          [disabled]="saveLoading || disableSaveButton"
          (click)="saveClick.emit(activeStep)">
          {{ 'it.general.save' | translate }}
        </button>
      }
      @if (showForwardButton) {
        <button
          type="button"
          itButton="outline-primary"
          size="sm"
          class="steppers-btn-next"
          [disabled]="disableForwardButton"
          (click)="forwardClick.emit(activeStep)">
          {{ 'it.core.forward' | translate }}
          <it-icon [labelWaria]="'it.core.forward' | translate" name="chevron-right" color="primary"></it-icon>
        </button>
      }
      @if (showConfirmButton) {
        <button
          type="button"
          itButton="primary"
          size="sm"
          class="steppers-btn-confirm d-lg-block"
          [progress]="confirmLoading"
          [disabled]="confirmLoading || disableConfirmButton"
          (click)="confirmClick.emit(activeStep)">
          {{ 'it.core.confirm' | translate }}
        </button>
      }
    </nav>
  }
</div>

<ng-template #checkIcon>
  <it-icon [labelWaria]="'it.core.confirmed' | translate" name="check" class="steppers-success"></it-icon>
  <span class="visually-hidden">{{ 'it.core.confirmed' | translate }}</span>
</ng-template>
