<div class="container-fluid flex-no-shrink fit-w">
  <div class="row separator-bottom">
    <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 p-t-24 p-l-16 p-r-16">
      <h3 translate class="text-medium l-h-base" data-cy="c8y-setup--completed-header-title">Summary</h3>
      <p translate class="lead text-normal p-t-8 p-b-8">
        Verify the setup result. If any step is not finished but required, you need to ensure that
        you have finished the step.
      </p>
    </div>
  </div>
</div>
<div class="inner-scroll flex-grow">
  <div class="container-fluid fit-w p-t-16">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
        <div class="text-center" [ngSwitch]="status">
          <c8y-operation-result
            *ngSwitchCase="'done'"
            text="{{ 'Setup completed' | translate }}"
            [size]="120"
            [vertical]="true"
            type="success"
          ></c8y-operation-result>
          <c8y-operation-result
            *ngSwitchCase="'warning'"
            text="{{ 'Setup completed with warnings' | translate }}"
            [size]="120"
            [vertical]="true"
            type="warning"
          ></c8y-operation-result>
          <c8y-operation-result
            *ngSwitchCase="'error'"
            text="{{ 'Setup not completed' | translate }}"
            [size]="120"
            [vertical]="true"
            type="error"
          ></c8y-operation-result>
        </div>
        <ul class="list-unstyled m-t-16 separator-top">
          <li
            class="p-t-4 p-b-4 d-flex a-i-center separator-bottom text-nowrap l-h-1"
            *ngFor="let step of setup.steps.slice(0, setup.steps.length - 1)"
            (click)="gotoStep(step.index)"
            style="cursor: pointer"
          >
            <span *ngIf="step.label">
              <span
                class="dot small m-r-4 l-h-1"
                [ngClass]="{
                  'dot-success': step.completed,
                  'dot-error': !step.completed && step.required,
                  'dot-warning': !step.completed && !step.required
                }"
              >
                {{ step.index + 1 }}
              </span>
              {{ step.label || (STEP_LABEL | translate) + ' ' }}
            </span>
            <span *ngIf="!step.label">
              <span translate>Step</span>
              {{ ' ' + (step.index + 1) }}
            </span>
            <span class="m-l-auto icon-20 l-h-1">
              <i
                *ngIf="step.completed"
                [c8yIcon]="'success'"
                class="text-success"
                [title]="'Completed' | translate"
              ></i>
              <i
                *ngIf="!step.completed && step.required"
                [c8yIcon]="'error'"
                class="text-danger"
                [title]="
                  'Not completed and required. Go to the step and fulfill the setup.' | translate
                "
              ></i>
              <i
                *ngIf="!step.completed && !step.required"
                [c8yIcon]="'warning'"
                class="text-warning"
                [title]="'This step was not completed but it is also not required.' | translate"
              ></i>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="card-footer separator d-flex j-c-center">
  <button
    translate
    class="btn btn-default"
    type="button"
    (click)="back()"
    *ngIf="stepper.selectedIndex !== 0"
    [disabled]="
      setup.currentSetupState === setup.setupState.FINALIZING ||
      setup.currentSetupState === setup.setupState.RELOADING
    "
  >
    Back
  </button>
  <button
    class="btn btn-primary"
    type="button"
    data-cy="c8y-setup-completed--done-button"
    (click)="start()"
    [disabled]="
      status === 'error' ||
      setup.currentSetupState === setup.setupState.FINALIZING ||
      setup.currentSetupState === setup.setupState.RELOADING
    "
    [ngClass]="{
      'btn-pending':
        setup.currentSetupState === setup.setupState.FINALIZING ||
        setup.currentSetupState === setup.setupState.RELOADING
    }"
  >
    <span *ngIf="setup.currentSetupState === setup.setupState.WIZARD" translate>
      Save and reload
    </span>
    <span *ngIf="setup.currentSetupState === setup.setupState.FINALIZING" translate>
      Getting things ready…
    </span>
    <span *ngIf="setup.currentSetupState === setup.setupState.RELOADING" translate>
      Done. Reloading the application.
    </span>
  </button>
</div>