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

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

{{- block title() -}}
  {{- if !.Item.Loaded -}}
    {{ gettext("Bookmark loading") }}
  {{- else -}}
    {{ .Item.Title }}
  {{- end }} - {{ gettext("Bookmarks") }}
{{- end -}}

{{- block head() -}}
  {{- if !.Item.Loaded -}}
    <noscript><meta http-equiv="refresh" content="5"></noscript>
  {{- end -}}
{{- end -}}

{{- block body() -}}
  {{- yield quickAccessMenu(items=slice(
    slice("menu", gettext("Menu")),
    slice("content", gettext("Main content")),
  )) -}}
<div class="layout">
  {{ include "/menu" }}

  <turbo-frame id="bookmark-info" data-controller="turbo-refresh panel scroll-progress"
   data-turbo-refresh-on-value="[data-deleted]"
   data-turbo-refresh-interval-value="3"
   data-panel-hidden-class="max-lg:hidden hidden"
   data-panel-force-hidden-class="max-lg:hidden"
   data-panel-body-class="max-lg:overflow-hidden"
   data-scroll-progress-auto-mark-after-value="{{ .Item.Type == `photo` ? 4 : 0 }}"
   class="bookmark-container">
    {{- if !.Item.Loaded -}}
      <div class="text-center mt-8" id="content">
        <span class="text-3xl">{{ yield spinner() }}</span>
        <p class="text-lg">{{ gettext("Bookmark is loading") }}…</p>
      </div>
    {{- else -}}
       <form class="hidden"
        data-controller="request"
        data-request-turbo-value="1"
        data-request-url-value="{{ urlFor(`/bookmarks`, .Item.ID, `update`) }}"
        data-request-method-value="post"
        data-scroll-progress-target="trigger"
        data-action="scroll-progress:progress->request#fetch"
      >
        <input type="hidden" name="read_progress" value="{{ .Item.ReadProgress }}"
          data-scroll-progress-target="value"
        >
        <input type="hidden" name="read_anchor" value="{{ .Item.ReadAnchor }}"
          data-scroll-progress-target="anchor"
        >
      </form>

      <div class="hidden print:block {{ preferences.ReaderFont().Class }}" data-controller="styler"
       dir="{{ default(.Item.TextDirection, `ltr`) }}">
        <h1 class="px-6 py-4 text-3xl print:px-0">{{ .Item.Title }}</h1>
      </div>

      <div id="bookmark-panel"
       class="bookmark-sidebar max-lg:hidden {{ if preferences.BookmarkSidebarHidden() }}hidden{{ end }}"
       data-panel-target="panel"
       tabindex="-1"
      >
        <div class="
          h-topnav border-b bg-app-bg border-b-gray-200
          flex px-3 items-center
          max-lg:sticky max-lg:top-0 max-lg:z-40
          print:hidden no-js:hidden
        ">
          <button type="button" title="{{ gettext(`Close panel`) }}"
           name="bookmark_sidebar_hidden"
           value="true"
           data-controller="request"
           data-request-url-value="{{ urlFor(`/profile/session`) }}"
           data-request-method-value="post"
           data-action="click->panel#toggle click->request#fetch"
           data-panel-target="button"
           aria-controls="bookmark-panel"
           class="lg:hidden p-1 ml-auto border rounded text-gray-400 hf:text-gray-700"
          >
            {{- yield icon(name="o-close", class="inline-block", svgClass="w-8 h-8") -}}
            <span class="sr-only">{{ gettext("Close panel") }}</span>
          </button>
        </div>
        <div class="pt-4 pb-8 px-6">
          {{ include "./components/sidebar" }}
        </div>
      </div>

      <div class="bookmark-content" id="content">
        {* top bar *}
        <div class="bookmark-topbar">
          <div class="flex-grow flex gap-4 items-center">
            <div>
              <a href="{{ urlFor(`/bookmarks/unread`) }}" data-controller="history" data-action="history#back"
              class="p-2 rounded-full w-8 h-8 border border-bg-100 inline-flex items-center justify-center
              hf:bg-gray-200 hf:text-gray-800">
                {{- yield icon(name="o-chevron-l", class="inline-block", svgClass="w-6 h-6") -}}
              </a>
            </div>

            <div class="flex-grow"></div>
            <a href="{{ urlFor(`/bookmarks`, .Item.UID, `update`) }}"
              data-controller="dialog"
              data-dialog-select-value="#bookmark-update-dialog"
              data-action="scroll-progress#skip dialog#open:prevent">
              {{- yield icon(name="o-pencil", class="inline-block", svgClass="w-6 h-6") -}}
              <span class="sr-only">{{- gettext("Edit") -}}</span>
            </a>

            {{- if .Item.HasArticle -}}
              {{- include "./components/reader_control" -}}
            {{- end -}}
            <button type="button" title="{{ gettext(`Bookmark information`) }}"
             name="bookmark_sidebar_hidden"
             value="{{ !preferences.BookmarkSidebarHidden() }}"
             data-controller="request"
             data-request-url-value="{{ urlFor(`/profile/session`) }}"
             data-request-method-value="post"
             data-action="click->panel#toggle click->request#fetch"
             data-panel-target="button"
             aria-expanded="false"
             aria-controls="bookmark-panel"
             class="no-js:hidden hf:text-gray-700"
            >
              {{- yield icon(name="o-sidebar", class="inline-block", svgClass="w-6 h-6") -}}
              <span class="sr-only">{{ gettext("Bookmark information") }}</span>
            </button>
          </div>
          {{- if .Item.HasArticle -}}
            <progress max="100" value="{{ .Item.ReadProgress }}" data-scroll-progress-target="indicator"></progress>
          {{- end -}}
        </div>

        {* title and description *}
        <div class="bookmark-header mt-4 print:mt-2 print:max-w-none mb-8 {{ preferences.ReaderWidth().Class }} {{ preferences.ReaderFont().Class }}"
         data-controller="styler">
          {{ include "./components/title_block" }}
        </div>

        {* content *}
        {{ include "./components/content_block" map(
          "Item", .Item,
          "HTML", .HTML
        ) }}

        <div class="mx-auto mt-6 pt-6 border-t print:hidden">
        {{- include "./components/bottom_actions" .Item -}}
        </div>
      </div>
    {{- end -}}
  </turbo-frame>
</div>

<dialog class="dialog" id="debug-info">
  <form class="dialog--top" method="dialog">
    <button class="dialog--close" title="{{ gettext(`Close dialog`) }}">
    {{ yield icon(name="o-close", class="", svgClass="h-8 w-8") }}
    </button>
  </form>

  <turbo-frame id="diagnostic-info" src="{{ urlFor(`/bookmarks`, .Item.ID, `diagnosis`) }}" loading="lazy">
  </turbo-frame>
</dialog>
{{- end -}}