<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
        class="text-medium l-h-base"
        translate
        data-cy="c8y-setup--completed-header-title"
      >
        Summary
      </h3>
      <p
        class="lead text-normal p-t-8 p-b-8"
        translate
      >
        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">
          @switch (status) {
            @case ('done') {
              <c8y-operation-result
                type="success"
                text="{{ 'Setup completed' | translate }}"
                [size]="120"
                [vertical]="true"
              ></c8y-operation-result>
            }
            @case ('warning') {
              <c8y-operation-result
                type="warning"
                text="{{ 'Setup completed with warnings' | translate }}"
                [size]="120"
                [vertical]="true"
              ></c8y-operation-result>
            }
            @case ('error') {
              <c8y-operation-result
                type="error"
                text="{{ 'Setup not completed' | translate }}"
                [size]="120"
                [vertical]="true"
              ></c8y-operation-result>
            }
          }
        </div>
        <ul class="list-unstyled m-t-16 separator-top">
          @for (step of setup.steps.slice(0, setup.steps.length - 1); track step.index) {
            <li
              class="p-t-4 p-b-4 d-flex a-i-center separator-bottom text-nowrap l-h-1"
              style="cursor: pointer"
              (click)="gotoStep(step.index)"
            >
              @if (step.label) {
                <span>
                  <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>
              }
              @if (!step.label) {
                <span>
                  <span translate>Step</span>
                  {{ ' ' + (step.index + 1) }}
                </span>
              }
              <span class="m-l-auto icon-20 l-h-1">
                @if (step.completed) {
                  <i
                    class="text-success"
                    [c8yIcon]="'success'"
                    [title]="'Completed' | translate"
                  ></i>
                }
                @if (!step.completed && step.required) {
                  <i
                    class="text-danger"
                    [c8yIcon]="'error'"
                    [title]="
                      'Not completed and required. Go to the step and fulfill the setup.'
                        | translate
                    "
                  ></i>
                }
                @if (!step.completed && !step.required) {
                  <i
                    class="text-warning"
                    [c8yIcon]="'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 gap-8 j-c-center">
  @if (stepper.selectedIndex !== 0) {
    <button
      class="btn btn-default"
      type="button"
      translate
      (click)="back()"
      [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
    }"
  >
    @if (setup.currentSetupState === setup.setupState.WIZARD) {
      <span translate>Save and reload</span>
    }
    @if (setup.currentSetupState === setup.setupState.FINALIZING) {
      <span translate>Getting things ready…</span>
    }
    @if (setup.currentSetupState === setup.setupState.RELOADING) {
      <span translate>Done. Reloading the application.</span>
    }
  </button>
</div>