<div class="viewport-modal">
  <div class="modal-header separator">
    <h3 id="modal-title">{{ 'Single operation details' | translate }}</h3>
  </div>

  <div
    class="modal-inner-scroll"
    id="modal-body"
  >
    <c8y-operations-list-item
      [operation]="operation"
      [collapsed]="collapsed"
      [noExpandToggle]="true"
      [readOnly]="readOnly"
      [isSmartRulesMicroserviceAvailable]="isSmartRulesMicroserviceAvailable"
    ></c8y-operations-list-item>
  </div>

  <div class="modal-footer">
    <button
      class="btn btn-default"
      title="{{ 'Close' | translate }}"
      type="button"
      (click)="modalRef.hide()"
    >
      {{ 'Close' | translate }}
    </button>
  </div>
</div>