<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-white">
    <div class="card-header large-padding separator sticky-top">
      <h4 class="card-title">
        {{ 'Command' | translate }}
      </h4>
    </div>

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

        <div class="flex-item-right">
          <device-status [mo]="device$ | async"></device-status>
        </div>
      </div>
      <textarea
        class="form-control inner-scroll flex-grow bg-gray-lighter"
        [(ngModel)]="command.text"
        (ngModelChange)="$event || resetSupportedDeliveryTypes()"
      >
      </textarea>
    </div>

    <div class="card-footer large-padding separator">
      <ng-container *ngFor="let deliveryType of deliveryTypes">
        <button
          class="btn btn-primary"
          type="button"
          *ngIf="deliveryType.isSupportedByCommand"
          [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>
      </ng-container>
    </div>
  </div>
  <div class="inner-scroll bg-gray-white">
    <div class="card-header large-padding separator sticky-top">
      <h4 class="card-title">
        {{ 'Operations' | translate }}
      </h4>
    </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.c8y_Command?.text || operation.description }}</small>
      </ng-template>
      <ng-template #timelineItemFooter let-operation>
        <div *ngIf="operation.c8y_Command?.text">
          <div class="legend form-block" translate>Command</div>
          <pre class="text-pre-normal">
              <code>{{operation.c8y_Command.text}}</code>
          </pre>
        </div>
        <div *ngIf="operation.c8y_Command?.result">
          <div class="legend form-block" translate>Response</div>
          <pre class="text-pre-normal">
              <code>{{operation.c8y_Command.result}}</code>
          </pre>
        </div>
      </ng-template>
    </div>
  </div>
</div>