{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
~}}

<section class="section is-closer {{if this.isFile "is-full-width"}}">
  {{#if this.isFile}}
    <Fs::File @allocation={{this.allocation}} @taskState={{this.taskState}} @file={{this.path}} @stat={{this.stat}} @class="fs-explorer">
      <Fs::Breadcrumbs @allocation={{this.allocation}} @taskState={{this.taskState}} @path={{this.path}} />
    </Fs::File>
  {{else}}
    <div class="fs-explorer boxed-section">
      <div class="boxed-section-head">
        <Fs::Breadcrumbs @allocation={{this.allocation}} @taskState={{this.taskState}} @path={{this.path}} />
      </div>
      {{#if this.directoryEntries}}
        <ListTable
          @source={{this.sortedDirectoryEntries}}
          @sortProperty={{this.sortProperty}}
          @sortDescending={{this.sortDescending}}
          @class="boxed-section-body is-full-bleed is-compact" as |t|>
          <t.head>
            <t.sort-by @prop="Name" @class="is-two-thirds">Name</t.sort-by>
            <t.sort-by @prop="Size" @class="has-text-right">File Size</t.sort-by>
            <t.sort-by @prop="ModTime" @class="has-text-right">Last Modified</t.sort-by>
          </t.head>
          <t.body as |row|>
            <Fs::DirectoryEntry @path={{this.path}} @allocation={{this.allocation}} @taskState={{this.taskState}} @entry={{row.model}} />
          </t.body>
        </ListTable>
      {{else}}
        <div class="boxed-section-body">
          <div data-test-empty-directory class="empty-message">
            <h3 data-test-empty-directory-headline class="empty-message-headline">No Files</h3>
            <p data-test-empty-directory-body class="empty-message-body">
              Directory is currently empty.
            </p>
          </div>
        </div>
      {{/if}}
    </div>
  {{/if}}
</section>