{{define "media_list"}}
<div class="breadcrumb mb-4">
  {{if .CurrentSub}}
    <a 
      href="/api/paths/{{.PathID}}/media"
      hx-get="/api/paths/{{.PathID}}/media"
      hx-target="#content"
      hx-swap="innerHTML"
    >🔙 Racine</a>
    &nbsp;/&nbsp;{{.CurrentSub}}
  {{end}}
</div>

<div class="dirs grid grid-cols-4 gap-4 mb-6">
  {{range .Dirs}}
  <div class="card p-3 rounded shadow">
    <a 
      hx-get="/api/paths/{{$.PathID}}/media?sub={{urlquery .SubPath}}"
      hx-target="#content" hx-swap="innerHTML"
    >
      <i class="fas fa-folder fa-2x"></i>
      <div>{{.Name}}</div>
    </a>
  </div>
  {{end}}
</div>

<div class="media grid grid-cols-4 gap-4">
  {{if .MediaItems}}
    {{range .MediaItems}}
    <div class="card p-2 rounded shadow">
      <a 
        href="#"
        hx-get="/media/0?path={{urlquery .FilePath}}"
        hx-target="#content" hx-swap="innerHTML"
      >
        <img src="{{.ThumbURL}}" alt="{{.Title}}" class="w-full h-32 object-cover rounded" />
        <div class="mt-2">
          <h3 class="text-sm font-semibold truncate">{{.Title}}</h3>
          {{if .Duration}}
            <small>{{printf "%d:%02d" (div .Duration 60) (mod .Duration 60)}}</small>
          {{end}}
        </div>
      </a>
    </div>
    {{end}}
  {{else}}
    <p>Aucun média dans ce dossier.</p>
  {{end}}
</div>
{{end}}