shelfy/templates/media_list.pages.tmpl

<section class="section">
  <div class="container">

    <!-- Breadcrumb -->
    <nav class="breadcrumb" aria-label="breadcrumbs">
      <ul>
        {{if .CurrentSub}}
        <li>
          <a hx-get="/api/paths/{{.PathID}}/media"
             hx-push-url="/api/paths/{{.PathID}}/media"
             hx-target="#content"
             hx-swap="innerHTML">
            🔙 Racine
          </a>
        </li>
        <li class="is-active"><a aria-current="page">{{.CurrentSub}}</a></li>
        {{end}}
      </ul>
    </nav>

    <!-- Sous-dossiers -->
    {{if .Dirs}}
    <div class="columns is-multiline">
      {{range .Dirs}}
      <div class="column is-one-quarter">
        <div class="card">
          <div class="card-content has-text-centered">
            <a hx-get="/api/paths/{{$.PathID}}/media?sub={{.SubPath | urlquery}}"
               hx-push-url="/api/paths/{{$.PathID}}/media?sub={{.SubPath | urlquery}}"
               hx-target="#content"
               hx-swap="innerHTML">
              <span class="icon is-large">
                <i class="fas fa-folder fa-2x"></i>
              </span>
              <p class="is-size-6">{{.Name}}</p>
            </a>
          </div>
        </div>
      </div>
      {{end}}
    </div>
    {{end}}

    <!-- Médias -->
    {{if .MediaItems}}
    <div class="columns is-multiline">
      {{range .MediaItems}}
      <div class="column is-one-quarter">
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3">
              <a hx-get="/media/{{.MediaPartID}}?path={{.FilePath | urlquery}}&pathID={{$.PathID}}&sub={{$.CurrentSub | urlquery}}"
                 hx-push-url="/media/{{.MediaPartID}}?path={{.FilePath | urlquery}}&pathID={{$.PathID}}&sub={{$.CurrentSub | urlquery}}"
                 hx-target="#content"
                 hx-swap="innerHTML">
                <img src="{{.ThumbURL}}" alt="{{.Title}}">
              </a>
            </figure>
          </div>
          <div class="card-content">
            <a hx-get="/media/{{.MediaPartID}}?path={{.FilePath | urlquery}}&pathID={{$.PathID}}&sub={{$.CurrentSub | urlquery}}"
               hx-push-url="/media/{{.MediaPartID}}?path={{.FilePath | urlquery}}&pathID={{$.PathID}}&sub={{$.CurrentSub | urlquery}}"
               hx-target="#content"
               hx-swap="innerHTML">
              <p class="title is-6 is-clipped">{{.Title}}</p>
              {{if .DurationFmt}}<p class="subtitle is-7">{{.DurationFmt}}</p>{{end}}
            </a>
          </div>
        </div>
      </div>
      {{end}}
    </div>
    {{end}}

    <!-- Aucun contenu -->
    {{if not .Dirs}}{{if not .MediaItems}}
    <div class="notification is-light has-text-centered">
      Aucun dossier ni média dans ce répertoire.
    </div>
    {{end}}{{end}}

  </div>
</section>