<section class="container directory-listing">
    <div class="directory-grid">
    <div class="col file-name heading directory__grid_heading">
    	<p class="title__heading">Name</p>
    </div>

    <div class="col file-size directory__grid__heading">
   	<p class="title__heading">Size</p> 
    </div>

    <div class="col file-modified directory__grid__heading">
    	<p class="title__heading">Created</p>
    </div>
    <!-- Combined loop for both directories and files -->
    <% 
      const renderItem = (item, isDirectory) => { 
    %>
      <div class="col file-name">
        <% if (isDirectory) { %>
          d <a href="/fs/<%= currentUser.username %>/<%= item.id %>"><%= item.name %></a> /
        <% } else { %>
          - <%= item.name %> <a href="/file/detail?fileId=<%= item.id %>">Details</a>
        <% } %>
      </div>
      <div class="col file-size">
          <p><%= formatBytes(item?.size) %></p>
      </div>
      <div class="col file-modified">
         <p><%= item?.createdAt %></p>
      </div>
    <% }; %>

    <!-- Render directories -->
    <% directoryListing.Directories.forEach(d => renderItem(d, true)); %>

    <!-- Render files -->
    <% directoryListing.File.forEach(f => renderItem(f, false)); %>
  </div>  
</div>  
</section>
