<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i c8yIcon="c8y-energy"></i>
    <h4
      id="modal-title"
      translate
    >
      Add bulk operation
    </h4>
  </div>
  <div
    class="modal-inner-scroll"
    id="modal-body"
  >
    <div
      class="modal-body p-t-8 p-b-8 sticky-top separator-bottom text-center"
      [hidden]="showComponent"
    >
      <p
        class="text-medium"
        translate
      >
        Select one of the available options
      </p>
      <p c8y-guide-docs>
        <small
          translate
          ngNonBindable
        >
          Check the
          <a
            c8y-guide-href="/docs/device-management-application/monitoring-and-controlling-devices/#to-add-a-bulk-operation-using-the-wizard"
          >
            user documentation
          </a>
          for more details.
        </small>
      </p>
    </div>

    <div class="list-group list-group-links">
      <button
        class="list-group-item flex-row"
        type="button"
        *ngFor="let item of bulkList"
        (click)="handleClick(item)"
      >
        <div
          class="list-item-icon"
          *ngIf="item.c8yIcon; else icon"
        >
          <i [c8yIcon]="item.c8yIcon"></i>
        </div>
        <ng-template #icon>
          <div class="list-item-icon">
            <i c8yIcon="cogs"></i>
          </div>
        </ng-template>
        <div
          class="list-item-body text-truncate"
          title="{{ item.name | translate }}"
        >
          {{ item.name | translate }}
        </div>
      </button>
    </div>
    <template #container></template>
  </div>
  <div
    class="modal-footer"
    [hidden]="showComponent"
  >
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="cancel()"
      c8yProductExperience
      [actionName]="BULK_OPERATION_EVENT"
      [actionData]="{
        action: bulkActions.CANCEL_ADD_BULK_OPERATION_DIALOG,
        step: pxSteps.SELECT_OPERATION_TYPE
      }"
    >
      <span translate>Cancel</span>
    </button>
  </div>
</div>