<c8y-modal
  [title]="title | translate"
  [headerClasses]="'dialog-header'"
  [customFooter]="true"
>
  <ng-container c8y-modal-title>
    <i c8yIcon="c8y-device-connect"></i>
  </ng-container>
  <c8y-stepper [hideStepProgress]="true" linear class="p-t-16" c8y-modal-body>
    <ng-container *ngIf="!loadingError">
      <cdk-step>
        <div class="sticky-top bg-component separator-bottom">
          <p
            class="p-l-24 p-r-24 p-t-16 p-b-16 m-b-0 separator-bottom text-16 text-medium text-center bg-component"
            translate
          >
            Register devices in bulk
          </p>
          <c8y-form-group class="p-24 p-t-16 p-b-8 m-b-0">
            <formly-form [form]="form" [fields]="template" [model]="model"></formly-form>
          </c8y-form-group>
        </div>
        <div
          *ngFor="let example of examples"
          class="bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24"
        >
          <p class="m-b-8 text-medium">
            {{ example.title | translate }}
          </p>
          <p class="small m-b-8">{{ example.description | translate }}</p>
          <a
            title="{{ 'Download template' | translate }}"
            class="btn btn-default btn-sm"
            target="_self"
            [href]="example.url"
            download="{{ 'Example bulk registration - template.csv' | translate }}"
          >
            <i c8yIcon="download"></i>
            <span translate>Download template</span>
          </a>
        </div>
        <c8y-stepper-buttons
          class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0"
          [showButtons]="{ cancel: true, next: true }"
          [disabled]="form.invalid"
          [pending]="pending"
          (onCancel)="cancel()"
          (onNext)="upload()"
          [labels]="{ next: 'Upload' }"
        ></c8y-stepper-buttons>
      </cdk-step>
    </ng-container>
    <cdk-step state="final">
      <div class="p-24">
        <div *ngIf="success; else fail">
          <c8y-operation-result
            text="{{ message | translate }}"
            [size]="84"
            [vertical]="true"
            type="success"
            class="lead"
            data-cy="success"
          ></c8y-operation-result>
          <c8y-list-group class="separator-top m-t-16">
            <c8y-li>
              <c8y-li-icon class="text-success" [icon]="'check-circle'"></c8y-li-icon>
              <p translate>File successfully uploaded.</p>
              <c8y-li-collapse>
                <pre><code>{{ result | json }}</code></pre>
              </c8y-li-collapse>
            </c8y-li>
          </c8y-list-group>
        </div>
        <ng-template #fail>
          <c8y-operation-result
            text="{{ message | translate }}"
            [size]="84"
            [vertical]="true"
            type="error"
            class="lead"
            data-cy="error"
          ></c8y-operation-result>
          <c8y-list-group *ngIf="result" class="separator-top m-t-16">
            <c8y-li>
              <c8y-li-icon class="text-danger" [icon]="'ban'"></c8y-li-icon>
              <p translate>Bulk operation failed.</p>
              <c8y-li-collapse>
                <pre><code>{{ result | json }}</code></pre>
              </c8y-li-collapse>
            </c8y-li>
          </c8y-list-group>
        </ng-template>
      </div>
      <c8y-stepper-buttons
        class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-component"
        [showButtons]="{ next: true }"
        (onNext)="complete()"
        [labels]="{ next: success ? 'Complete' : 'Cancel' }"
      ></c8y-stepper-buttons>
    </cdk-step>
  </c8y-stepper>
</c8y-modal>