{{#if noConnection}}
  <div data-test-connection-error class="notification is-error">
    <h3 class="title is-4">Cannot fetch file</h3>
    <p>The files for this {{if task 'task' 'allocation'}} are inaccessible. Check the condition of the client the allocation is on.</p>
  </div>
{{/if}}
<div data-test-header class="boxed-section-head">
  {{yield}}
  <span class="pull-right">

    {{#if (not fileTypeIsUnknown)}}
      <a data-test-log-action="raw" class="button is-white is-compact" href="{{catUrl}}" target="_blank" rel="noopener noreferrer">View Raw File</a>
    {{/if}}
    {{#if (and isLarge isStreamable)}}
      <button data-test-log-action="head" class="button is-white is-compact" onclick={{action "gotoHead"}}>Head</button>
      <button data-test-log-action="tail" class="button is-white is-compact" onclick={{action "gotoTail"}}>Tail</button>
    {{/if}}
    {{#if isStreamable}}
      <button data-test-log-action="toggle-stream" class="button is-white is-compact" onclick={{action "toggleStream"}}>
        {{x-icon (if logger.isStreaming "media-pause" "media-play") class="is-text"}}
      </button>
    {{/if}}
  </span>
</div>
<div data-test-file-box class="boxed-section-body {{if (eq fileComponent "stream") "is-dark is-full-bleed"}}">
  {{#if (eq fileComponent "stream")}}
    <StreamingFile @logger={{logger}} @mode={{mode}} @isStreaming={{isStreaming}} />
  {{else if (eq fileComponent "image")}}
    <ImageFile @src={{catUrl}} @alt={{stat.Name}} @size={{stat.Size}} />
  {{else}}
    <div data-test-unsupported-type class="empty-message is-hollow">
      <h3 class="empty-message-headline">Unsupported File Type</h3>
      <p class="empty-message-body message">The Nomad UI could not render this file, but you can still view the file directly.</p>
      <p class="empty-message-body">
        <a data-test-log-action="raw" class="button is-light" href="{{catUrl}}" target="_blank" rel="noopener noreferrer">View Raw File</a>
      </p>
    </div>
  {{/if}}
</div>