<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <h1 class="c8y-icon c8y-icon-energy"></h1>
    <h4 translate>Add bulk operation</h4>
  </div>
  <div class="modal-inner-scroll">
    <div class="modal-body text-center" [hidden]="showComponent">
      <h4 translate>Select one of the available options</h4>
      <p c8y-guide-docs>
        <small translate ngNonBindable>
          Check the
          <a c8y-guide-href="users-guide/device-management/#bulk-operation-wizard">
            User guide`KEEP_ORIGINAL`
          </a>
          for more details.
        </small>
      </p>
    </div>

    <div class="list-group list-group-links">
      <button
        *ngFor="let item of bulkList"
        type="button"
        class="list-group-item flex-row"
        (click)="handleClick(item)"
      >
        <div *ngIf="item.c8yIcon; else icon" class="list-item-icon">
          <i [c8yIcon]="item.c8yIcon"></i>
        </div>
        <ng-template #icon>
          <div class="list-item-icon">
            <i c8yIcon="cogs"></i>
          </div>
        </ng-template>
        <div title="{{ item.name | translate }}" class="list-item-body text-truncate">
          {{ item.name | translate }}
        </div>
      </button>
    </div>
    <template #container></template>
  </div>
  <div class="modal-footer" [hidden]="showComponent">
    <button
      (click)="cancel()"
      type="button"
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      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>