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

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

<turbo-frame id="bookmark-sidebar-{{ .Item.ID }}" disabled>
  {{- if len(.Item.Errors) -}}
    {{- yield message(type="error") content -}}
      <details>
        <summary class="font-semibold">{{ gettext("Errors occurred during extraction.") }}</summary>
        <ul class="mt-2 list-disc">
        {{- range .Item.Errors -}}
          <li class="ml-4">{{ . }}</li>
        {{- end -}}
        </ul>
        <p class="mt-4 text-sm">{{ gettext(`
          Depending on the error, Readeck's browser extension may provide
          a workaround.`
        ) }}</p>
        <p class="mt-4 text-center">
          <a class="btn btn-primary rounded-full px-3" target="_blank" href="https://readeck.org/en/extension">{{ gettext("Learn more") }}</a>
        </p>
        <p class="mt-4 text-sm text-right">
          <button
           class="underline text-red-900 hf:text-red-950"
           data-controller="dialog"
           data-dialog-select-value="#debug-info"
           data-action="scroll-progress#skip dialog#open">{{ gettext("View log") }}</button>
        </p>
      </details>
    {{- end -}}
  {{- end -}}

  <p class="hidden print:block mb-4 font-semibold text-primary-dark">{{ .Item.URL }}</p>

  <div class="print:flex print:gap-8">
    {{- if .Item.Type == "article" && isset(.Item.Resources.image) -}}
    <div class="mb-4">
      <span class="
        block relative overflow-hidden pt-16/9
        print:overflow-visible
        print:pt-0 print:static
      ">
        <img src="{{ .Item.Resources.image.Src }}" alt="" class="
          absolute top-0 h-full w-full object-cover object-center rounded
          print:w-52 print:h-auto print:static
          "
          width="{{ .Item.Resources.image.Width }}"
          height="{{ .Item.Resources.image.Height }}" />
      </span>
    </div>
    {{- end -}}

    <ul class="mb-4">
      <li class="flex items-center gap-1 mb-2">
      {{- if isset(.Item.Resources.icon) -}}
        <img class="bookmark-icon"
        alt="" src="{{ .Item.Resources.icon.Src }}"
        width="{{ .Item.Resources.icon.Width }}"
        height="{{ .Item.Resources.icon.Height }}">
      {{- end -}}
      <strong class="overflow-hidden text-ellipsis" title="{{ default(.Item.SiteName, gettext(`no site name`)) }}"
       dir="{{ default(.Item.TextDirection, `ltr`) }}">{{ default(.Item.SiteName, gettext(`no site name`)) }}</strong>
      </li>
      {{- yield line_icon(icon="o-download") content -}}
        <span class="text-gray-700 inline-flex items-center gap-2 group" title="{{ date(.Item.Created, `%c`) }}">
          {{- date(.Item.Created, "%e %B %Y") }}
          <button class="opacity-0 group-hfw:opacity-100 text-gray-300 hf:text-gray-700"
            title="diagnosis"
            data-controller="dialog"
            data-dialog-select-value="#debug-info"
            data-action="scroll-progress#skip dialog#open">
            {{- yield icon(name="o-terminal") -}}
          </button>
        </span>
      {{- end -}}
      {{- if !empty(.Item.Published) -}}
        {{- yield line_icon(icon="o-calendar") content -}}
          {{ gettext("Published on %s", date(.Item.Published, "%e %B %Y")) }}
        {{- end -}}
      {{- end -}}
      {{- if !empty(.Item.Authors) -}}
        {{- yield line_icon(icon="o-pen") content -}}
          {{ gettext("By %s", join(.Item.Authors, ", ")) }}
        {{- end -}}
      {{- end -}}
      {{- yield line_icon(icon="o-link-ext") content -}}
        <a href="{{ .Item.URL }}" class="link" target="_blank">{{ .Item.Domain }}</a>
      {{- end -}}
      {{- if .Item.ReadingTime > 0 -}}
        {{- yield line_icon(icon="o-clock") content -}}
          {{ ngettext("About %d minute read", "About %d minutes read", .Item.ReadingTime, .Item.ReadingTime) }}
        {{- end -}}
      {{- end -}}
    </ul>

    <div class="hidden print:block ml-auto">
      <img src="{{ qrcode(.Item.URL, -2, `#1e485b`) }}" alt="" class="rounded">
    </div>
  </div>

  {{ include "./actions" .Item }}

  {* sharing frame *}
  <div class="print:hidden
    [&>turbo-frame:not(.hidden)]:block [&>turbo-frame]:my-4 [&>turbo-frame]:p-4
    [&>turbo-frame]:shadow-lg [&>turbo-frame]:bg-gray-100
    [&_p]:text-sm [&_img]:my-4 [&_img]:mx-auto [&_button]:w-full
  ">
    <turbo-frame id="bookmark-share-{{ .Item.ID }}" class="hidden"></turbo-frame>
  </div>

  <h3 class="mb-2 title text-lg {{ if len(.Item.Labels) == 0 }}print:hidden{{ end }}">{{- yield icon(name="o-label") }}
    {{ gettext("Labels") }}</h3>
  {{ include "./labels_form" .Item }}

  {{- if .Item.HasArticle -}}
    {{ include "./annotation_list" }}

    {{- if .Item.HasArticle && .Item.Links && .Item.Links.HasPages() -}}
      <details class="group mb-4 print:hidden">
        <summary class="block mb-2 title text-lg hf:text-primary-dark">
          {{- yield icon(name="o-link") }}
          <span class="underline decoration-dotted decoration-primary">{{ gettext("Links") }}</span>
        </summary>
        <ul class="mb-4 list-disc list-outside pl-4">
        {{- range _, x := .Item.Links.Pages() -}}
          <li class="list-item mb-1 leading-none">
            <a class="link text-sm" href="{{ x.URL }}" rel="nofollow noopener noreferrer" target="_blank"
            title="{{ default(x.Title, x.URL) }}">
              {{ default(shortText(x.Title, 80), shortURL(x.URL, 40)) }}
            </a>
          </li>
        {{- end -}}
        </ul>
      </details>
    {{- end -}}
  {{- end -}}
</turbo-frame>