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

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "./base" }}
{{- import "/_libs/forms" -}}
{{- import "/_libs/pagination" -}}
{{- import "./components/list_actions"}}

{{ block title() }}{{ .PageTitle }}{{ end }}

{{- block extraHead() }}
  <link rel="alternate" href="{{ urlFor(`/api/bookmarks/feed`) }}?{{ .Filters.GetQueryString() }}"
   type="application/atom+xml" title="Atom Feed">
{{- end -}}

{{ block mainContent() -}}

<turbo-frame id="bookmark-list"
 data-controller="turbo-refresh"
 data-turbo-refresh-interval-value="10"
 data-turbo-refresh-on-value="[data-bookmark-deleted='true']">

  <div class="group -mt-8 py-4 -mx-6 px-6 w-100 border-b border-gray-200 border-opacity-80
    bg-gradient-to-r from-gray-100 to-app-bg
    sm:pt-9
    print:hidden
  ">
    <div class="flex items-center mx-4 my-2 invisible group-hfw:visible">
      <label for="create-url" class="text-sm font-semibold cursor-pointer"
      >{{ gettext("Save a new link") }}</label>
    </div>

    <form action="{{ urlFor(`/bookmarks`) }}" method="post"
       data-controller="turbo-form"
       data-turbo-frame="_top">
      <div class="flex p-1 form-input rounded-full border">
        <input type="text" name="url" id="create-url" size="15"
          class="leading-tight w-full rounded-full px-4 py-2 bg-gray-light focus-visible:bg-gray-light text-gray-dark ring-0 ring-offset-0"
          value="{{ string(.Form.Get(`url`).String()) }}" placeholder="https://" />
        <button type="submit" class="whitespace-nowrap btn btn-primary rounded-full pl-0.5 py-0 inline-flex gap-1 items-center leading-none">
          {{ yield icon(name="o-create", class="text-yellow-400 dark:text-yellow-600", svgClass="h-8 w-8") }}
          <span>{{ pgettext("button", "Save link") }}</span>
        </button>
      </div>

      {{- if .Form.Errors() -}}
        {{ range .Form.Errors() }}<p class="ml-4 text-red-700"><strong>{{ .Error() }}</strong></p>{{- end -}}
      {{- end -}}
      {{- if .MaybeSearch -}}
        {{- yield message() content -}}
        {{ gettext(`"%[1]s" is not a valid address. Did you mean to search your bookmarks for %[2]s?`,
          html(.Form.Get(`url`).String()),
          `<a data-turbo-frame="_top" href="` + urlFor(`/bookmarks`) + `?bf=1&search=` + url(.Form.Get(`url`).String()) + `"` +
          `class="link font-bold">` + html(.Form.Get(`url`).String()) + `</a>`,
        )|unsafe }}
        {{- end -}}
      {{- else if .Form.Get("url").Errors() -}}
        {{- yield message(type="error") content -}}
          <ul>
            {{ range .Form.Get("url").Errors() }}<li>{{ . }}</li>{{ end }}
          </ul>
        {{- end -}}
      {{- end -}}
    </form>
  </div>

  {{- if .Count.Total == 0 -}}
    <div class="my-6 flex gap-4 max-w-std">
      <div class="-mt-9">
        {{ yield icon(name="o-big-arrow", class="text-yellow-500", svgClass="h-36", w="50", h="250") }}
      </div>
      <div class="flex-grow-0">
        <h1 class="title text-h3">{{ gettext("Welcome to Readeck!") }}</h1>
        <p class="text-xl mb-4 p-4 text-blue-800 bg-yellow-100 border border-blue-800 rounded">
            {{ gettext("You don't have any bookmarks yet.<br> Copy a link in the field above and start saving.")|raw }}
        </p>
        <p class="mb-8">{{ gettext(
          `Read more about bookmarks in the <a class="%s" href="%s">documentation</a>.`,
          "link",
          urlFor(`/docs`),
        )|raw }}</p>

        <div class="grid grid-cols-2 gap-4">
          <div class="hidden chrome:flex firefox:flex flex-col">
            <h3 class="title text-xl">
              {{- yield icon(name="o-extension", class="text-green-600", svgClass="h-6 w-6") }}
              {{ gettext("Readeck Browser Extension") -}}
            </h3>
            <p class="mb-1 grow">{{ gettext(`
            With the Browser Extension, you can save pages, images and selections
            directly from your browser!`
            ) }}</p>
            <p class="flex justify-start">
              <a class="btn btn-primary btn-outlined rounded-full py-2 px-4" target="_blank"
               href="https://readeck.org/en/extension">
                {{- gettext("Learn more") -}}
            </a></p>
          </div>

          {{- if hasPermission("bookmarks", "import") -}}
            <div class="flex flex-col">
              <h3 class="title text-xl">
                {{- yield icon(name="o-import", class="text-yellow-600", svgClass="h-6 w-6") }}
                {{ gettext("Import existing bookmarks") -}}
              </h3>
              <p class="mb-4 grow">{{ gettext(`
                Would you like to import from a similar tool or from a file with existing bookmarks?
                Try Readeck's import tool.
              `) }}</p>
              <p class="flex justify-start">
                <a class="btn btn-primary btn-outlined rounded-full py-2 px-4"
                href="{{ urlFor(`/bookmarks/import`) }}">
                  {{- gettext("Import links and articles") -}}
                </a>
              </p>
            </div>
          {{- end -}}
        </div>
      </div>
    </div>
  {{- end -}}

  {{- if isset(.Filters) && .Count.Total > 0 }}
    <div class="flex flex-wrap items-center gap-2 -mx-6 px-6 py-2">
      <h1 class="flex-grow title mb-0 text-h2 max-md:w-full">{{ .PageTitle }}</h1>
      {{- yield list_actions() content -}}
        <form action="{{ urlFor() }}" method="get">
          <input type="hidden" name="bf" value="{{ .Filters.IsActive() ? 0 : 1 }}">
          <button type="submit" class="btn-outlined py-1"
           data-controller="remote"
           data-action="remote#toggleDetails:prevent"
           data-remote-selector-param="#filters"
          >{{- yield icon(name="o-filter") }} {{ gettext("Filters") }}
          </button>
        </form>

        {{- if hasPermission("bookmarks", "export") || hasPermission("bookmarks", "import") -}}
          {{ sortParam := isset(.CurrentOrder) ? .CurrentOrder : "" }}
          {{- yield export_menu(params=`?` + .Filters.GetQueryString(), sortParam=sortParam) content -}}
            {{- if hasPermission("bookmarks", "import") -}}
              <li><a class="link" href="{{ urlFor(`/bookmarks/import`) }}">
                {{- yield icon(name="o-import") }} {{ gettext("Import bookmarks") }}</a></li>
            {{- end -}}
          {{- end -}}
        {{- end -}}
      {{- end -}}
    </div>

    {{- if .Filters.IsActive() -}}
      <p class="mb-2">
      {{- if .Pagination.TotalCount == 0 -}}
        {{ gettext(`Your search query yielded <strong>no results</strong>.`)|raw }}
      {{- else -}}
        {{ ngettext(
          `Your search query yielded <strong>%d result</strong>.`,
          `Your search query yielded <strong>%d results</strong>.`,
          .Pagination.TotalCount,
          .Pagination.TotalCount,
        )|raw }}
      {{- end -}}
      </p>
    {{- end -}}
  {{ end -}}

  <div class="bookmark-list-container">
    <details id="filters" class="bookmark-filters" {{- if .Filters.IsActive() }} open{{- end -}}>
      <summary>
        {{- yield icon(name="o-filter") }}
        {{ gettext("Filters") -}}
      </summary>
      <p class="mb-4 flex gap-2">
        <strong>{{ gettext("Filters") }}</strong>
        <a href="{{ urlFor(`/docs/bookmark-list`) }}#filters"
         class="link ml-auto">{{ yield icon(name="o-help") }}
        {{ gettext("Documentation") }}</a>
      </p>
      <form action="{{ urlFor(`/bookmarks`) }}" method="get" aria-label="{{ gettext(`Bookmark filters`) }}">
        {{ include("./components/filters") .Filters }}
        {{- if isset(.CurrentOrder) -}}
          <input type="hidden" name="sort" value="{{ .CurrentOrder }}">
        {{- end -}}

        <input type="hidden" name="bf" value="1" />
        <div class="bookmark-filters--actions mt-4">
          <button class="btn btn-primary">{{ pgettext("action", "Search") }}</button>
          {{ if .Filters.IsActive() -}}
            <a href="{{ urlFor(`?bf=1`) }}" class="btn btn-default rounded text-center">{{ gettext("Reset search") }}</a>
            <a href="{{ urlFor(`/bookmarks/collections/add`)}}?{{ .Filters.GetQueryString() }}"
              class="col-span-2 btn-outlined btn-primary font-semibold rounded text-center">{{ yield icon(name="o-plus") }}
              {{ gettext("Create a collection") }}</a>
          {{- end }}
        </div>
      </form>
    </details>

    {{- include "./components/bookmark_list" -}}
  </div>
</turbo-frame>
{{- end }}