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

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "/_layouts/sidemenu" }}

{{- block extraHead() -}}{{- end -}}
{{- block head() -}}
  <meta name="turbo-refresh-scroll" content="preserve">
  {{- yield extraHead() -}}
{{- end -}}

{{- block sideMenu() -}}
{{- yield sideMenuTitle() content -}}{{ gettext("Bookmarks") }}{{- end }}

<form class="mt-2 ml-0.5 mr-1 flex" action="{{ urlFor(`/bookmarks`) }}" method="get">
  <input type="hidden" name="bf" value="1" />
  <div class="flex p-1 form-input rounded-full w-full">
    <input title="search in bookmarks" size="14" type="text" name="search" placeholder="{{ gettext(`Search`) }}"
     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"
    />
    <button title="search"
     class="btn btn-primary rounded-full w-[2.8rem]"
    >{{ yield icon(name="o-search") }}</button>
  </div>
</form>

<turbo-frame id="bookmarks-sidemenu">
  <menu class="my-4">
    {{ yield sideMenuItem(name=gettext("All"), path="/bookmarks", icon="o-library",
                          nbItems=.Count.Total,
                          current=pathIs("/bookmarks")) }}
    {{ yield sideMenuItem(name=gettext("Unread"), path="/bookmarks/unread", icon="o-check-off",
                          nbItems=.Count.Unread,
                          current=pathIs("/bookmarks/unread")) }}
    {{ yield sideMenuItem(name=gettext("Archive"), path="/bookmarks/archives", icon="o-archive-off",
                          nbItems=.Count.Archived,
                          current=pathIs("/bookmarks/archives")) }}
    {{ yield sideMenuItem(name=gettext("Favorites"), path="/bookmarks/favorites", icon="o-favorite-off",
                          nbItems=.Count.Marked,
                          current=pathIs("/bookmarks/favorites")) }}
  </menu>

  {{- if isset(.Count) }}
    <menu class="my-4">
      {{- if isset(.Count.ByType.article) && .Count.ByType.article > 0 }}
        {{ yield sideMenuItem(name=gettext("Articles"), path="/bookmarks/articles", icon="o-file",
                              nbItems=.Count.ByType.article,
                              current=pathIs("/bookmarks/articles")) }}
      {{- end -}}

      {{- if isset(.Count.ByType.video) && .Count.ByType.video > 0 }}
        {{ yield sideMenuItem(name=gettext("Videos"), path="/bookmarks/videos", icon="o-video",
                              nbItems=.Count.ByType.video,
                              current=pathIs("/bookmarks/videos")) }}
      {{- end -}}

      {{- if isset(.Count.ByType.photo) && .Count.ByType.photo > 0 }}
        {{ yield sideMenuItem(name=gettext("Pictures"), path="/bookmarks/pictures", icon="o-photo",
                              nbItems=.Count.ByType.photo,
                              current=pathIs("/bookmarks/pictures")) }}
      {{- end -}}
    </menu>
  {{ end -}}

  <hr class="w-[25%] border-gray-200 mx-auto">

  <menu class="mt-4">
    {{ yield sideMenuItem(name=gettext("Labels"), path="/bookmarks/labels", icon="o-label",
                          current=pathIs("/bookmarks/labels", "/bookmarks/labels")) }}
    {{ yield sideMenuItem(name=gettext("Highlights"), path="/bookmarks/highlights", icon="o-highlight",
                          current=pathIs("/bookmarks/highlights")) }}
    {{ yield sideMenuItem(name=gettext("Collections"), path="/bookmarks/collections", icon="o-collection",
                          current=pathIs("/bookmarks/collections", "/bookmarks/collections/*")) }}
  </menu>

  {{- if user.Settings.AddonReminder && isset(.Count) && .Count.Total > 0
      && (pathIs("/bookmarks") || pathIs("/bookmarks/unread"))
  -}}
    <div class="hidden chrome:hidden firefox:hidden chrome:block firefox:block border rounded mt-8 p-2 bg-app-bg text-sm"
    data-controller="browser-extension"
    data-browser-extension-installed-class="chrome:hidden firefox:hidden"
    >
      <div class="flex gap-2 items-start">
        <p>
          {{ yield icon(name="o-extension", class="text-green-600", svgClass="h-8 w-8") }}
        </p>
        <div class="grow">
          <p class="mb-1 font-semibold">{{ gettext("Did you know?") }}</p>
          <p class="mb-1">{{ gettext(`
            With the Browser Extension, you can save pages, images and selections
            directly from your browser!`
          ) }}</p>
        </div>
      </div>
      <div class="flex flex-col gap-2 items-center mt-2">
          <a class="btn btn-outlined btn-primary py-1 rounded-full" target="_blank" href="https://readeck.org/en/extension">{{ gettext("Learn more") }}</a>

          <button class="text-gray-700 underline decoration-dotted hf:text-app-fg"
          name="settings_addon_reminder"
          value="false"
          data-controller="request"
          data-request-url-value="{{ urlFor(`/api/profile`) }}"
          data-request-method-value="PATCH"
          data-action="request#fetch request:done->browser-extension#setReady"
          >{{ gettext("Don't remind me") }}</button>
      </div>
    </div>
  {{- end -}}
</turbo-frame>
{{- end -}}