<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>

    <c8y-bulk-operation-type-list
      (onCustomType)="createComponent($event)"
    ></c8y-bulk-operation-type-list>
    <template #container></template>
  </div>
  <div class="modal-footer" [hidden]="showComponent">
    <button
      (click)="cancel()"
      type="button"
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
    >
      <span translate>Cancel</span>
    </button>
  </div>
</div>