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

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

{{- block title() -}}{{ gettext("Bookmark Collections") }}{{- end -}}

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

<p class="my-4"><a href="{{ urlFor(`./add`) }}"
 class="btn btn-primary">{{ gettext("Create a new collection") }}</a></p>

{{- if len(.Collections) == 0 -}}
  <div class="flex gap-4 max-w-std">
    <div class="-mt-2">
      {{ yield icon(name="o-big-arrow", class="text-yellow-500", svgClass="h-36", w="50", h="250") }}
    </div>
    <div class="flex-grow-0">
      <div class="prose my-4 px-4 pt-4 text-blue-800 bg-yellow-100 border border-blue-800 rounded">
        <p>{{ gettext(`
          Collections let you easily organize and export your bookmarks
          by saving search requests of your choice.
          When you create a new bookmark that matches a collection's
          criteria, it will appear immediately.
          Here are some examples:
        `) }}
        </p>
        <ul>
          <li>{{ gettext("The unread articles (no photos or videos)") }},</li>
          <li>{{ gettext(`The archived articles from "wikipedia.org"`) }},</li>
          <li>{{ gettext(`The pictures with the label "cat"`) }},</li>
          <li>{{ gettext(`The articles that contain "shelter" in their title`) }}.</li>
        </ul>
      </div>
      <p>{{ gettext(
        `Read more about collections in the <a class="%s" href="%s">documentation</a>.`,
        "link",
        urlFor(`/docs/collections`),
      )|raw }}</p>
    </div>
  </div>
{{- end -}}


{{- if len(.Collections) > 0 -}}
<turbo-frame id="collection-list"
 data-controller="turbo-refresh"
 data-turbo-refresh-interval-value="10"
 data-turbo-refresh-on-value="[data-collection-deleted='true']">
  {{- yield list() content -}}
  {{- range .Collections -}}
    {{- yield list_item(class="flex gap-2 items-center hfw:bg-gray-100 max-md:block") content -}}
      <a class="block flex-grow p-4" href="{{ urlFor(`.`, .ID) }}">
        <strong class="link font-semibold">{{ .Name }}</strong>
        <small class="block">Created on: {{ date(.Created, "%e %B %Y") }}</small>
      </a>
      {{- if .IsDeleted -}}
        <div class="flex items-center max-w-xs m-4 max-md:mt-0"
         data-collection-deleted="true">
          <span class="text-red-700 text-xs font-semibold">
            This collection will be removed in a few seconds.
          </span>
          <form action="{{ urlFor(`.`, .ID, `delete`) }}" method="post">
            <input type="hidden" name="cancel" value="1" />
            <button type="submit"
            class="btn btn-primary whitespace-nowrap text-sm py-1 ml-2">{{ yield icon(name="o-undo") }} Undo</button>
          </form>
        </div>
      {{- end -}}
    {{- end -}}
  {{- end -}}
  {{- end -}}
</turbo-frame>
{{- end -}}

{{- end -}}