{{- /*
  resource-tiles — display a page's file resources as a responsive grid
  of cards ("tiles"), each with a thumbnail, a title, the file size and a
  download link. Handy for a downloads page that offers a handful of
  PDFs, spreadsheets, archives, …

  Params:
    match   glob selecting which page resources to show
            (default "*.pdf")
    cols    number of columns on large screens (default 3)
    sort    resource field to order by: "title", "name" or "weight"
            (default: the order they appear in front matter)
    class   extra CSS classes for the wrapping row

  Thumbnails are resolved per resource, in order of preference:
    1. a `thumbnail` param on the resource, pointing at an image in the
       same page bundle
    2. an image resource whose name matches the file, e.g. `report.png`
       or `report.pdf.png` next to `report.pdf`
    3. a generic file icon showing the upper-cased extension

  Per-resource metadata is read from the page's front matter:

    resources:
      - src: report.pdf
        title: Annual report
        params:
          description: Everything that happened last year.
          thumbnail: report-cover.png
*/ -}}

{{- $page := .Page -}}
{{- $match := or (.Get "match") "*.pdf" -}}
{{- $cols := or (.Get "cols") 3 -}}
{{- $class := .Get "class" -}}
{{- $imgExts := slice "png" "jpg" "jpeg" "webp" "gif" "avif" -}}

{{- $resources := $page.Resources.Match $match -}}
{{- with .Get "sort" -}}
  {{- $resources = sort $resources . -}}
{{- end -}}

{{- with $resources -}}
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-{{ $cols }} g-4 my-4{{ with $class }} {{ . }}{{ end }}">
  {{- range . }}
    {{- $res := . -}}
    {{- $ext := strings.TrimPrefix "." (path.Ext .Name) -}}

    {{- /* Title: front-matter `title`, else the humanized file name.
           Hugo falls back .Title to .Name, so treat that as unset. */ -}}
    {{- $title := .Title -}}
    {{- if or (not $title) (eq $title .Name) -}}
      {{- $title = humanize (path.BaseName .Name) -}}
    {{- end -}}

    {{- /* Resolve a thumbnail image (see the doc comment above). */ -}}
    {{- $thumb := false -}}
    {{- with .Params.thumbnail -}}
      {{- $thumb = $page.Resources.GetMatch . -}}
    {{- end -}}
    {{- if not $thumb -}}
      {{- $base := path.BaseName $res.Name -}}
      {{- range $imgExts -}}
        {{- if not $thumb -}}
          {{- $thumb = or ($page.Resources.GetMatch (printf "%s.%s" $base .)) ($page.Resources.GetMatch (printf "%s.%s" $res.Name .)) -}}
        {{- end -}}
      {{- end -}}
    {{- end -}}
    {{- if and $thumb (eq $thumb.ResourceType "image") -}}
      {{- $thumb = $thumb.Fill "600x400 Center" -}}
    {{- end -}}

    <div class="col">
      <div class="card resource-tile h-100">
        {{- if $thumb }}
          <img class="card-img-top resource-tile__thumb" src="{{ $thumb.RelPermalink }}" alt="{{ $title }}" loading="lazy">
        {{- else }}
          <div class="card-img-top resource-tile__icon" aria-hidden="true">
            <svg width="72" height="72" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 2h8l4 4v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Z"
                    fill="currentColor" fill-opacity=".08" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
              <path d="M14 2v4h4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
            </svg>
            <span class="resource-tile__ext">{{ $ext | upper }}</span>
          </div>
        {{- end }}
        <div class="card-body">
          <h5 class="card-title">{{ $title }}</h5>
          {{- with $res.Params.description }}
          <p class="card-text">{{ $page.RenderString . }}</p>
          {{- end }}
        </div>
        <div class="card-footer bg-transparent d-flex align-items-center justify-content-between gap-2">
          <span class="text-body-secondary small text-uppercase">
            {{- $ext }}{{ with $res.Content }} &middot; {{ partial "human_file_size" . }}{{ end -}}
          </span>
          <a class="btn btn-primary btn-sm stretched-link" href="{{ $res.RelPermalink }}" download>Download</a>
        </div>
      </div>
    </div>
  {{- end }}
</div>
{{- end -}}