{{/*
  Browsable app catalog. Each app may link to its Federated page (`page`,
  shown as "Learn more") and to the project's own site (`url`).
*/}}
{{ $s := . }}
{{ partial "sections/head.html" $s }}
<div class="app-directory">
  {{ range $s.categories }}
  <details class="app-category">
    <summary>
      <span class="app-category-name">{{ .name }}</span>
      <span class="app-count">{{ len .apps }}</span>
    </summary>
    <ul class="app-list">
      {{ range $app := .apps }}
      <li class="app-item">
        <strong class="app-name">{{ with $app.page }}<a href="{{ . | relURL }}">{{ $app.name }}</a>{{ else }}{{ $app.name }}{{ end }}</strong>
        {{ with $app.description }}<span class="app-desc">{{ . }}</span>{{ end }}
        {{ with $app.page }}<a class="app-link" href="{{ . | relURL }}">Learn more.</a>{{ end }}
        {{ with $app.url }}<a class="app-link" href="{{ . }}" target="_blank" rel="noopener">{{ if $app.page }}Project site ↗{{ else }}Learn more.{{ end }}</a>{{ end }}
      </li>
      {{ end }}
    </ul>
  </details>
  {{ end }}
</div>