<c8y-title>
  {{ options.name | humanizeAppName | async }}
</c8y-title>

@if (currentSetupState !== setupState.START) {
  <div class="card content-fullpage fadeInRightBig animated">
    <c8y-stepper-outlet
      class="d-contents"
      [showDefaultButtons]="false"
      [steps]="steps"
    ></c8y-stepper-outlet>
  </div>
}

@if (currentSetupState === setupState.START) {
  <div class="card content-fullpage d-flex d-col zoomIn animated">
    <div class="inner-scroll flex-grow">
      <div class="card-block">
        <div class="row">
          <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 p-t-24">
            <c8y-setup-illustration></c8y-setup-illustration>
            <h1
              class="p-t-16 p-b-16 text-center text-medium"
              ngNonBindable
              translate
              [translateParams]="{ appName: options.name | humanizeAppName | async }"
              data-cy="c8y-setup--setup-header-title"
            >
              Welcome to {{ appName }}
            </h1>
            @if (hasRole) {
              <p
                class="lead text-normal"
                translate
              >
                This application (or any plugin that you added recently) has pre-requirements that
                needs to be configured first. This wizard will guide you through the steps that are
                necessary to get your customized application up and running.
              </p>
            }
            @if (properties.length > 0) {
              <div class="flex-grow">
                <c8y-properties-list
                  icon="info"
                  [title]="'Application properties' | translate"
                  [properties]="properties"
                  [data]="options"
                ></c8y-properties-list>
              </div>
            }
            @if (!hasRole) {
              <div class="alert alert-danger m-32">
                <strong translate>No permission</strong>
                <div translate>
                  You don't have sufficient rights to setup this application. Contact an application
                  administrator to setup the required steps.
                </div>
              </div>
            }
            @if (!isOwner) {
              <div class="alert alert-danger m-32">
                <strong translate>Not the owner</strong>
                <div translate>
                  The current application is not owned by this tenant. Clone the application before
                  running the setup.
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </div>
    <div class="card-footer separator gap-8 d-flex j-c-center">
      @if (canSkip) {
        <button
          class="btn btn-default"
          [title]="
            'You can skip the setup now. It will be shown again as soon as you restart the application.'
              | translate
          "
          (click)="skip()"
          translate
          data-cy="c8y-setup--skip-setup-button"
        >
          Skip
        </button>
      }

      <button
        class="btn btn-primary"
        [title]="'Start the setup wizard.' | translate"
        (click)="start()"
        translate
        [disabled]="!hasRole || !isOwner"
        data-cy="c8y-setup--start-setup-button"
      >
        Start
      </button>
    </div>
  </div>
}