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

<ListTable class="path-tree" @source={{@branch}} as |t|>
  <t.head>
    <th>
      Path
    </th>
    <th>
      Namespace
    </th>
    <th>
      Last Modified
    </th>
  </t.head>
  <tbody>
    {{#each this.folders as |folder|}}
      <tr data-test-folder-row {{on "click" (fn this.handleFolderClick folder.data.absolutePath)}}>
        <td colspan="3"
          {{keyboard-shortcut 
            enumerated=true
            action=(fn this.handleFolderClick folder.data.absolutePath)
          }}
        >
          <span>
            <FlightIcon @name="folder" />
            <LinkTo @route="variables.path" @model={{folder.data.absolutePath}} @query={{hash namespace="*"}}>
              {{trim-path folder.name}}
            </LinkTo>
          </span>
        </td>
      </tr>
    {{/each}}

    {{#each this.files as |file|}}
      <tr
        data-test-file-row="{{file.name}}"
        {{on "click" (fn this.handleFileClick file)}}
        class={{if (can "read variable" path=file.absoluteFilePath namespace=file.variable.namespace) "" "inaccessible"}}
        {{keyboard-shortcut 
          enumerated=true
          action=(fn this.handleFileClick file)
        }}
      >
        <td>
          <FlightIcon @name="file-text" />
          {{#if (can "read variable" path=file.absoluteFilePath namespace=file.variable.namespace)}}
          <LinkTo
            @route="variables.variable"
            @model={{file.variable.id}}
            @query={{hash namespace="*"}}
          >
            {{file.name}}
          </LinkTo>
          {{else}}
            <span title="Your access policy does not allow you to view the contents of {{file.name}}">{{file.name}}</span>
          {{/if}}
        </td>
        <td>
          {{file.variable.namespace}}
        </td>
        <td>
          <span class="tooltip" aria-label="{{format-ts file.variable.modifyTime}}">
            {{moment-from-now file.variable.modifyTime}}
          </span>
        </td>
      </tr>
    {{/each}}

  </tbody>
      </ListTable>
