<c8y-modal
  [title]="'Bulk device registration' | translate"
  [headerClasses]="'dialog-header'"
  [customFooter]="true"
>
  <ng-container c8y-modal-title>
    <i c8yIcon="upload"></i>
  </ng-container>

  <c8y-stepper [hideStepProgress]="true" linear id="modal-body">
    <cdk-step>
      <p class="modal-subtitle sticky-top" translate>Register devices in bulk</p>

      <c8y-form-group class="d-block p-24 p-t-16 p-b-0 m-b-0">
        <formly-form [form]="form" [fields]="template" [model]="model"></formly-form>
      </c8y-form-group>

      <div class="p-24 m-t-0 bg-level-1">
        <div class="content-flex-30 flex-stretch">
          <div class="col-6 p-16 p-b-0 d-flex d-col j-c-between">
            <div>
              <p class="m-b-8">
                <strong translate>Simple registration</strong>
              </p>
              <small class="text-muted" translate>
                Creates all registration requests at once, then each one needs to go through regular
                acceptance process.
              </small>
            </div>
            <div class="m-b-16 m-t-16">
              <a
                title="{{ 'Download template' | translate }}"
                class="btn btn-default btn-sm"
                target="_self"
                (click)="downloadSimple()"
              >
                <i c8yIcon="download" translate></i>
                {{ 'Download template' | translate }}
              </a>
            </div>
          </div>
          <div class="col-6 p-16 p-b-0 d-flex d-col j-c-between">
            <div>
              <p class="m-b-8">
                <strong translate>Full registration</strong>
              </p>
              <small class="text-muted" translate>
                Creates all device credentials and devices using provided list of property values.
                Devices can start communicating with the platform immediately.
              </small>
            </div>
            <div class="m-b-16 m-t-16">
              <a
                title="{{ 'Download template' | translate }}"
                class="btn btn-default btn-sm"
                target="_self"
                (click)="downloadFull()"
              >
                <i c8yIcon="download" translate></i>
                {{ 'Download template' | translate }}
              </a>
            </div>
          </div>
        </div>
      </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>

    <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 have been processed.' | translate }}</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-level-0"
        [showButtons]="{ next: true }"
        (onNext)="complete()"
        [labels]="{ next: success ? 'Close' : 'Cancel' }"
      ></c8y-stepper-buttons>
    </cdk-step>
  </c8y-stepper>
</c8y-modal>