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

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

{{- if .Item.Type == "photo" && isset(.Item.Resources.image) -}}
  <figure class="mb-8">
    <img alt="" src="{{ .Item.Resources.image.Src }}"
    class="mx-auto"
    width="{{ .Item.Resources.image.Width }}" height="{{ .Item.Resources.image.Height }}">
  </figure>
{{- else if .Item.Type == "video" && isset(.Item.Resources.image) && .Item.Embed -}}
  <div class="video-player mb-8" data-controller="video">
    <img alt="" src="{{ .Item.Resources.image.Src }}"
      width="{{ .Item.Resources.image.Width }}" height="{{ .Item.Resources.image.Height }}">
    <template data-video-target="embed">
      {{- raw(.Item.Embed) -}}
    </template>
    <template data-video-target="play">
      <button class="play-button"
       data-action="{{ if !.Item.HasArticle }}click->scroll-progress#setPosition {{ end -}} click->video#play"
       data-scroll-progress-position-param="100"
      >
        <span></span>
      </button>
    </template>
  </div>
{{- end -}}

{{- if .Item.HasArticle -}}
<turbo-frame id="bookmark-content-{{ .Item.ID }}"
 src="{{ urlFor(`/api/bookmarks`, .Item.ID, `article`) }}"
 disabled
 data-controller="annotations"
 data-action="request:annotation-removed@document->annotations#reload"
 data-annotations-api-url-value="{{ urlFor(`/api/bookmarks`, .Item.ID, `annotations`) }}"
 data-annotations-hidden-class="hidden"
>

<div class="bookmark-article print:max-w-none relative {{ preferences.ReaderWidth().Class }}"
 data-controller="styler">
  <div class="annotator hidden" data-annotations-target="controls">
    {{- colors := slice(
      slice("yellow", gettext("Yellow")),
      slice("red", gettext("Red")),
      slice("blue", gettext("Blue")),
      slice("green", gettext("Green")),
      slice("none", gettext("Transparent")),
    ) -}}
    <div class="annotator--arrow" data-annotations-target="arrow"></div>
    <div class="annotator--content">
      <div class="annotator--colors">
        {{ gettext("Highlight") }}:
        {{- range colors -}}
          <input type="radio" name="color" value="{{ .[0] }}" aria-label="{{ .[1] }}"
           data-annotations-target="color">
        {{- end -}}
      </div>

      <div class="flex flex-col">
        <label for="annotation-note" data-annotations-target="whenNew whenOne">{{ gettext("Note") }}:</label>
        <textarea class="form-textarea select-none" id="annotation-note" name="note"
         rows="3" cols="45" maxlength="1024"
         data-annotations-target="note whenNew whenOne"></textarea>
      </div>

      <div class="flex">
        <button class="btn btn-primary" data-action="click->annotations#create"
         data-annotations-target="whenNew">{{ gettext("Save") }}</button>
        <button class="btn btn-primary" data-action="click->annotations#update"
         data-annotations-target="whenOne whenMany">{{ gettext("Save") }}</button>
        <button class="btn-outlined btn-danger ml-auto"
         data-action="click->annotations#delete"
         data-annotations-target="whenOne whenMany">
          {{- yield icon(name="o-trash") -}}
          <span class="sr-only">{{ gettext("Delete") }}</span>
        </button>
      </div>
    </div>
  </div>

  <div class="
    prose
    {{ preferences.ReaderFont().Class }}
    {{ preferences.ReaderFontSize().Class }}
    {{ preferences.ReaderLineHeight().Class }}
    {{ preferences.ReaderJustify().Class }}
    {{ preferences.ReaderHyphenation().Class }}
    overflow-x-auto
    "
    lang="{{ .Item.Lang }}"
    dir="{{ default(.Item.TextDirection, `ltr`) }}"
    data-controller="styler modal-images modal-videos"
    data-modal-images-selector-value="img[src]:not([data-iframe-params])"
    data-modal-videos-selector-value="img[data-iframe-params]"
    data-modal-videos-base-url-value="{{ urlFor(`/videoplayer`) }}?type=embed"
    data-annotations-target="root"
    data-scroll-progress-target="tracked">
    {{- unsafeWrite(.HTML) -}}

    {* Image modal *}
    <dialog class="dialog-image font-sans" data-modal-images-target="dialog">
      <form method="dialog">
        <button class="dialog--close" title="{{ gettext(`Close`) }}">
        {{ yield icon(name="o-close", svgClass="w-8") }}
        </button>
      </form>
      <div>
        <img alt="" data-modal-images-target="img">
      </div>
    </dialog>

    <template data-modal-images-target="trigger">
      <span class="inline-block relative group">
        <button type="button" title="{{ gettext(`Show image`) }}"
         class="
          absolute top-0 right-0 p-2 z-10
          text-white bg-black/30 rounded-bl rounded-tr drop-shadow
          block opacity-0
          group-hfw:opacity-100 hfw:bg-black/30 hfw:ring-0
         "
         data-action="click->scroll-progress#skip"
        >
          {{- yield icon(name="o-expand", svgClass="h-6") -}}
        </button>
      </span>
    </template>

    {* Video modal *}
    <dialog class="dialog-video font-sans" data-modal-videos-target="dialog">
      <form method="dialog">
        <button class="dialog--close" title="{{ gettext(`Close`) }}">
        {{ yield icon(name="o-close", svgClass="w-8") }}
        </button>
      </form>
      <div>
        <iframe src="" frameborder="0"></iframe>
      </div>
    </dialog>

    <template data-modal-videos-target="trigger">
      <span class="inline-block relative group">
        <button type="button" title="{{ gettext(`Play video`) }}"
         class="
          absolute w-full h-full z-10 cursor-pointer
          decoration-none text-white bg-black/10 rounded-bl rounded-tr drop-shadow
          flex items-center justify-center
          opacity-0
          group-hfw:opacity-100 hfw:bg-black/10 hfw:ring-0
         "
         data-action="click->scroll-progress#skip"
        >
          {{- yield icon(name="o-expand", class="p-4 rounded bg-black/50", svgClass="w-8 h-8") -}}
        </button>
      </span>
    </template>

  </div>
  {{- include "./bookmark_qrcode" }}
</div>
</turbo-frame>
{{- else -}}
  {{- include "./bookmark_qrcode" }}
{{- end -}}