<c8y-action-bar-item [placement]="'right'">
  <c8y-realtime-btn [service]="operationRealtime"></c8y-realtime-btn>
</c8y-action-bar-item>

<div class="card content-fullpage d-grid grid__col--6-6--md">
  <div class="inner-scroll d-flex d-col bg-level-0">
    <div class="card-header large-padding separator sticky-top">
      <div class="card-title">
        {{ 'Command' | translate }}
      </div>
    </div>

    <div class="card-block d-flex d-col flex-grow large-padding">
      <div class="d-flex p-b-16">
        <button
          class="btn btn-default btn-sm"
          [title]="'Display a list of predefined commands' | translate"
          type="button"
          (click)="getPredefinedCommand()"
          data-cy="shell--predefined-commands"
        >
          {{ 'Predefined commands' | translate }}
        </button>

        <div class="m-l-auto">
          <device-status [mo]="device$ | async"></device-status>
        </div>
      </div>
      <textarea
        class="form-control inner-scroll flex-grow bg-level-2 text-monospace"
        [attr.aria-label]="'Commands' | translate"
        placeholder="{{ 'Add commands or use predefined commands above.' | translate }}"
        [(ngModel)]="command.text"
        data-cy="shell-component--commands"
        (ngModelChange)="$event || resetSupportedDeliveryTypes()"
      ></textarea>
    </div>

    <div class="card-footer large-padding separator">
      @for (deliveryType of deliveryTypes; track deliveryType.name) {
        @if (deliveryType.isSupportedByCommand) {
          <button
            class="btn btn-primary"
            type="button"
            [disabled]="!command?.text || (sendingCommand$ | async)"
            (click)="execute(deliveryType.name)"
          >
            <span
              [title]="
                deliveryType.default
                  ? ('Execute' | translate)
                  : (executeViaLabel | translate: { deliveryType: deliveryType.name })
              "
            >
              {{
                deliveryType.default
                  ? ('Execute' | translate)
                  : (executeViaLabel | translate: { deliveryType: deliveryType.name })
              }}
            </span>
          </button>
        }
      }
    </div>
  </div>
  <div class="inner-scroll bg-level-1">
    <div class="card-header large-padding separator sticky-top">
      <div class="card-title">
        {{ 'Operations' | translate }}
      </div>
    </div>
    <div class="card-block large-padding">
      <c8y-operations-timeline
        [operations]="operations"
        [sourceId]="device.id"
        [filterPipe]="filterPipe"
        [bodyTemplate]="timelineItemBody"
        [footerTemplates]="[timelineItemFooter]"
        [propertiesToHide]="['c8y_Command']"
      ></c8y-operations-timeline>
      <ng-template
        #timelineItemBody
        let-operation
      >
        <small>{{ operation.description || operation.c8y_Command?.text }}</small>
      </ng-template>
      <ng-template
        #timelineItemFooter
        let-operation
      >
        @if (operation.c8y_Command?.text) {
          <div>
            <div
              class="legend form-block"
              translate
            >
              Command
            </div>
            <!-- Keep this in a single line since `pre-text` will preserve all whitespaces in the `pre` tag.-->
            <pre class="p-8 text-pre"><code>{{operation.c8y_Command.text}}</code></pre>
          </div>
        }
        @if (operation.c8y_Command?.result) {
          <div>
            <div
              class="legend form-block"
              translate
            >
              Response
            </div>
            <!-- Keep this in a single line since `pre-text` will preserve all whitespaces in the `pre` tag.-->
            <pre class="p-8 text-pre"><code>{{operation.c8y_Command.result}}</code></pre>
          </div>
        }
      </ng-template>
    </div>
  </div>
</div>