{{#if noConnection}}
  <div data-test-connection-error class="notification is-error">
    <h3 class="title is-4">Cannot fetch logs</h3>
    <p>The logs for this task are inaccessible. Check the condition of the node the allocation is on.</p>
  </div>
{{/if}}
<div class="boxed-section-head">
  <span>
    <button data-test-log-action="stdout" class="button {{if (eq mode "stdout") "is-info"}}" {{action "setMode" "stdout"}}>stdout</button>
    <button data-test-log-action="stderr" class="button {{if (eq mode "stderr") "is-danger"}}" {{action "setMode" "stderr"}}>stderr</button>
  </span>
  <span class="pull-right">
    <button data-test-log-action="head" class="button is-white" onclick={{action "gotoHead"}}>Head</button>
    <button data-test-log-action="tail" class="button is-white" onclick={{action "gotoTail"}}>Tail</button>
    <button data-test-log-action="toggle-stream" class="button is-white" onclick={{action "toggleStream"}}>
      {{x-icon (if logger.isStreaming "media-pause" "media-play") class="is-text"}}
    </button>
  </span>
</div>
<div data-test-log-box class="boxed-section-body is-dark is-full-bleed">
  {{streaming-file logger=logger mode=streamMode isStreaming=isStreaming}}
</div>