<c8y-modal [headerClasses]="'dialog-header'" [customFooter]="true">
  <ng-container c8y-modal-title>
    <span class="c8y-icon c8y-icon-device-connect"></span>
    <h4>{{ title | translate }}</h4>
  </ng-container>
  <c8y-stepper [hideStepProgress]="true" linear class="p-t-16">
    <ng-container *ngIf="!loadingError">
      <cdk-step [stepControl]="form">
        <p
          class="
            p-l-24 p-r-24 p-t-16 p-b-16
            m-b-0
            sticky-top
            separator-bottom
            lead
            text-center
            bg-component
          "
          translate
        >
          Register devices in bulk
        </p>
        <c8y-form-group class="m-24">
          <formly-form [form]="form" [fields]="template" [model]="model"></formly-form>
        </c8y-form-group>
        <div *ngFor="let example of examples" class="m-24">
          <div class="bg-gray-lighter m-t-16">
            <div class="row m-l-16 m-r-16">
              <div class="col-xs-16 m-t-16">
                <p class="m-b-16">
                  <strong>{{ example.title }}</strong>
                </p>
                <small class="text-muted">{{ example.description }}</small>
              </div>
            </div>
            <div class="row m-l-16 m-r-16">
              <div class="col-xs-16 m-b-16 m-t-16">
                <a
                  title="{{ 'Download template' | translate }}"
                  class="btn btn-default btn-xs"
                  target="_self"
                  [href]="example.url"
                  download="{{ 'Example bulk registration - template.csv' | translate }}"
                >
                  <span>
                    <i c8y-icon="download" translate>Download template</i>
                  </span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <c8y-stepper-buttons
          class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-white"
          [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"
          ></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"
          ></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-white"
        [showButtons]="{ next: true }"
        (onNext)="complete()"
        [labels]="{ next: success ? 'Complete' : 'Cancel' }"
      ></c8y-stepper-buttons>
    </cdk-step>
  </c8y-stepper>
</c8y-modal>