<c8y-wizard-header>
  <i c8yIcon="privacy-policy"></i>
  <div
    class="modal-title h4"
    id="modal-title"
    translate
  >
    Accept license(s)`dialog title`
  </div>
</c8y-wizard-header>
<c8y-wizard-body>
  <div class="m-t-16 m-l-32 m-r-32">
    <c8y-stepper>
      <cdk-step
        [stepControl]="formGroupAccept"
        [label]="'Disclaimer' | translate"
      >
        <div class="m-t-8">
          <div class="text-center m-b-16 h4">
            <i
              class="text-info d-block icon-40 m-b-8"
              c8yIcon="info-circle"
            ></i>
            {{ 'About community packages' | translate }}
          </div>
          <p
            class="m-b-16"
            [innerHTML]="disclaimerHtml"
          ></p>
          <hr style="margin: 16px -24px 16px" />
          <div class="text-center">
            <c8y-form-group class="d-inline-block">
              <div
                class="d-flex d-col a-i-center"
                [formGroup]="formGroupAccept"
              >
                <label class="c8y-checkbox">
                  <input
                    class="form-control"
                    type="checkbox"
                    required
                    formControlName="confirmed"
                  />
                  <span></span>
                  <span translate>Understood and agreed.</span>
                </label>
                <c8y-messages class="d-inline-block">
                  <c8y-message
                    [name]="'required'"
                    [text]="'Accept the maintenance disclaimer.' | translate"
                  ></c8y-message>
                </c8y-messages>
              </div>
            </c8y-form-group>
          </div>
        </div>

        <c8y-wizard-footer *ngIf="stepper.selectedIndex === 0">
          <c8y-stepper-buttons
            [title]="'Confirm agreement' | translate"
            [showButtons]="{ next: true, cancel: true, back: false, custom: false }"
            (onCancel)="cancel()"
          ></c8y-stepper-buttons>
        </c8y-wizard-footer>
      </cdk-step>
      <cdk-step
        state="final"
        [stepControl]="formGroupLicenses"
        [label]="'Licenses' | translate"
      >
        <div
          class="p-t-24"
          *ngFor="let license of licenses"
        >
          <label
            class="text-normal"
            *ngIf="license.licenseName"
            translate
            [translateParams]="{ appName: license.appName, licenseName: license.licenseName }"
            ngNonBindable
          >
            <b>{{ appName }}</b>
            uses
            <b>{{ licenseName }}</b>
            license
          </label>
          <label
            class="text-normal"
            *ngIf="!license.licenseName"
            translate
            [translateParams]="{ appName: license.appName, licenseName: license.licenseName }"
            ngNonBindable
          >
            <b>{{ appName }}</b>
            uses
            <b>no license</b>
          </label>
          <c8y-license-view
            [url]="license.url"
            [name]="license.licenseName"
          ></c8y-license-view>
        </div>
        <c8y-wizard-footer *ngIf="stepper.selectedIndex === 1">
          <c8y-form-group class="text-center d-inline-block">
            <div
              class="d-flex d-col a-i-center"
              [formGroup]="formGroupLicenses"
            >
              <label class="c8y-checkbox">
                <input
                  class="form-control"
                  type="checkbox"
                  required
                  formControlName="acceptAll"
                />
                <span></span>
                <span
                  *ngIf="licenses.length === 1"
                  translate
                >
                  Accept license.`formal agreement`
                </span>
                <span
                  *ngIf="licenses.length > 1"
                  translate
                >
                  Accept all licenses.`formal agreement`
                </span>
              </label>
              <c8y-messages class="d-inline-block">
                <c8y-message
                  [name]="'required'"
                  [text]="'You need to accept the license agreement(s)' | translate"
                ></c8y-message>
              </c8y-messages>
            </div>
          </c8y-form-group>
          <hr style="margin: 0 -24px 16px" />
          <c8y-stepper-buttons
            [showButtons]="{ next: true, cancel: true, back: false, custom: false }"
            (onCancel)="cancel()"
            (onNext)="done()"
          ></c8y-stepper-buttons>
        </c8y-wizard-footer>
      </cdk-step>
    </c8y-stepper>
  </div>
</c8y-wizard-body>