{{define "sftp_pane"}}
<div id="{{.Pane}}-pane-content" x-data="{ pane: '{{.Pane}}' }">
  <table class="w-full text-left border-collapse text-xs">
    <thead>
      <tr class="border-b border-outline-variant/20 text-outline uppercase tracking-wider font-bold">
        <th class="py-2.5 px-4 font-semibold text-[10px]">Name</th>
        <th class="py-2.5 px-4 font-semibold text-[10px] text-right">Size</th>
        <th class="py-2.5 px-4 font-semibold text-[10px] text-right">Modified</th>
        <th class="py-2.5 px-4 font-semibold text-[10px]"></th>
      </tr>
    </thead>
    <tbody>
      {{range .Files}}
      <tr class="border-b border-outline-variant/10 hover:bg-primary/5 transition-colors group cursor-pointer"
          hx-get="/sftp/pane?pane={{$.Pane}}&dir={{.Name}}" hx-target="#{{$.Pane}}-pane-content" hx-swap="outerHTML">
        <td class="py-2.5 px-4">
          <div class="font-semibold text-on-surface flex items-center gap-2.5 max-w-[180px] cursor-pointer">
            <span class="shrink-0
              {{if eq .Type "folder"}}text-yellow-500{{else if eq .Type "code"}}text-purple-500{{else if eq .Type "image"}}text-secondary{{else if eq .Type "lock"}}text-red-400{{else}}text-outline/50{{end}}">
              {{if eq .Type "folder"}}
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
              {{else if eq .Type "code"}}
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
              {{else if eq .Type "image"}}
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
              {{else if eq .Type "lock"}}
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
              {{else}}
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
              {{end}}
            </span>
            <span class="truncate group-hover:text-primary transition-colors">{{.Name}}</span>
          </div>
        </td>
        <td class="py-2.5 px-4 text-right text-on-surface-variant font-mono">{{.Size}}</td>
        <td class="py-2.5 px-4 text-right text-outline">{{.Modified}}</td>
        <td class="py-2.5 px-4 text-right" @click.stop>
          <div class="flex items-center justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
            {{if ne .Type "folder"}}
            {{if eq $.Pane "local"}}
            <button @click="$dispatch('toast-message', { message: 'Uploading {{.Name}}...' })"
                    class="p-1 hover:bg-primary/10 rounded text-primary transition-colors" title="Upload to remote">
              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5m0 0l5 5m-5-5v12"/></svg>
            </button>
            {{end}}
            {{if eq $.Pane "remote"}}
            <button @click="$dispatch('toast-message', { message: 'Downloading {{.Name}}...' })"
                    class="p-1 hover:bg-primary/10 rounded text-primary transition-colors" title="Download to local">
              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </button>
            {{end}}
            {{end}}
            <button hx-delete="/sftp/rm?pane={{$.Pane}}&name={{.Name}}" hx-target="#{{$.Pane}}-pane-content" hx-swap="outerHTML"
                    hx-confirm="Delete {{.Name}}?"
                    class="p-1 hover:bg-red-50 hover:text-error rounded text-outline transition-colors" title="Delete file">
              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
            </button>
          </div>
        </td>
      </tr>
      {{end}}
    </tbody>
  </table>

  {{if eq (len .Files) 0}}
  <div class="text-center py-8 text-on-surface-variant">
    <p class="text-sm">This directory is empty</p>
  </div>
  {{end}}

  {{if gt (len .Files) 0}}
  <div class="p-3 bg-surface-container-low border-t border-outline-variant/30 text-[10px] text-outline text-center font-bold">
    TIP: Click file or {{if eq .Pane "local"}}upload{{else}}download{{end}} button to transmit to server
  </div>
  {{end}}
</div>
{{end}}