{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "./base" }}

{{ block title() }}{{ gettext("Bookmark Labels") }}{{ end }}

{{ block mainContent() -}}

<h1 class="title text-h2">{{ yield title() }}</h1>

<p class="mb-4">{{ gettext(`
  Labels let your organize your bookmarks the way you want.
  You can set anything to a label, including emojis!
`) }}
</p>

<ul class="grid lg:grid-cols-3 xl:grid-cols-4 gap-4">
{{- range .Labels -}}
  <li><a href="{{ urlFor() }}?name={{ url(.Name) }}"
   class="h-full flex items-center gap-1 border rounded-xl
   py-2 px-4 font-semibold
   hf:bg-yellow-100"
   >
    <span class="flex-grow [overflow-wrap:anywhere]">{{ .Name }}</span>
    <span class="py-0.5 px-2 bg-gray-200 text-xs rounded-lg">{{ .Count }}</span>
  </a></li>
{{- end -}}
</ul>

{{ end }}