<c8y-modal [headerClasses]="'dialog-header'" [customFooter]="true">
  <ng-container c8y-modal-title>
    <span c8yIcon="upload"></span>
    <h4>{{ 'Bulk device registration' | translate }}</h4>
  </ng-container>
  <c8y-stepper [hideStepProgress]="true" linear>
    <cdk-step [stepControl]="form">
      <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
            sticky-top
            separator-bottom
            text-16 text-medium text-center
            bg-component
          "
          translate
        >
          Register general 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 class="bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24">
        <div>
          <p class="m-b-8 text-medium" translate>Simple registration</p>
          <p class="small m-b-8" translate>
            Creates all registration requests at once, then each one needs to go through regular
            acceptance process.
          </p>
        </div>
        <a
          title="{{ 'Download template' | translate }}"
          class="btn btn-default btn-sm"
          target="_self"
          (click)="downloadSimple()"
        >
          <i c8yIcon="download"></i>
          <span translate>Download template</span>
        </a>
      </div>
      <div class="bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24">
        <div>
          <p class="m-b-8 text-medium" translate>Full registration</p>
          <p class="small m-b-8" translate>
            Creates all device credentials and devices using provided list of property values.
            Devices can start communicating with the platform immediately.
          </p>
        </div>
        <a
          title="{{ 'Download template' | translate }}"
          class="btn btn-default btn-sm"
          target="_self"
          (click)="downloadFull()"
        >
          <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-white"
        [showButtons]="{ cancel: true, next: true }"
        [disabled]="form.invalid"
        [pending]="pending"
        (onCancel)="cancel()"
        (onNext)="upload()"
        [labels]="{ next: 'Upload' }"
      ></c8y-stepper-buttons>
    </cdk-step>
    <cdk-step state="final">
      <div class="m-24">
        <div *ngIf="success; else warning">
          <c8y-operation-result
            text="{{ message | translate }}"
            [size]="84"
            [vertical]="true"
            type="success"
            class="lead"
          ></c8y-operation-result>
        </div>
        <ng-template #warning>
          <c8y-operation-result
            text="{{ message | translate }}"
            [size]="84"
            [vertical]="true"
            type="error"
            class="lead"
          ></c8y-operation-result>
        </ng-template>
        <c8y-list-group class="separator-top m-t-16">
          <ng-container *ngIf="result; else failedResponse">
            <c8y-li *ngIf="success; else fail">
              <c8y-li-icon class="text-success" icon="check-circle"></c8y-li-icon>
              <p>All devices processed successfully.</p>
              <c8y-li-collapse>
                <pre><code>{{ result | json }}</code></pre>
              </c8y-li-collapse>
            </c8y-li>
            <ng-template #fail>
              <c8y-li>
                <c8y-li-icon class="text-danger" icon="ban"></c8y-li-icon>
                <p
                  ngNonBindable
                  [translateParams]="{ count: result?.numberOfFailed, total: result?.numberOfAll }"
                  translate
                >
                  Failed to process {{ count }} out of {{ total }}.
                </p>
                <c8y-li-collapse>
                  <pre><code>{{ result | json }}</code></pre>
                </c8y-li-collapse>
              </c8y-li>
            </ng-template>
          </ng-container>
          <ng-template #failedResponse>
            <c8y-li>
              <c8y-li-icon class="text-danger" [icon]="'ban'"></c8y-li-icon>
              <small>{{ failedResult?.message | translate }}</small>
              <c8y-li-collapse>
                <pre><code>{{ failedResult | json }}</code></pre>
              </c8y-li-collapse>
            </c8y-li>
          </ng-template>
        </c8y-list-group>
      </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 ? 'Close' : 'Cancel' }"
      ></c8y-stepper-buttons>
    </cdk-step>
  </c8y-stepper>
</c8y-modal>