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

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

<turbo-frame id="bookmark-annotation-list-{{ .Item.ID }}" class="print:hidden">
  <h3 class="mb-2 title text-lg">{{- yield icon(name="o-highlight") }} {{ gettext("Highlights") }}</h3>
  <div class="group">
    {{- if len(.Item.Annotations) == 0 -}}
      <p class="mb-4">{{ gettext("Start selecting text in the article to create a new highlight.") }}</p>
    {{- else -}}
      <ul class="mb-4" data-controller="request scrollto">
      {{- range _, x := .Item.Annotations -}}
        <li class="
         mb-3 flex p-2 rd-annotation bg-opacity-20 hfw:bg-opacity-80
         rounded border group/btn" data-annotation-color="{{ x.Color ? x.Color : `yellow` }}">
          <a class="grow flex flex-col" href="#annotation-{{ x.ID }}"
           data-action="scrollto#scroll:prevent panel#close:prevent">
            {{- if x.Note != "" -}}
              <p class="flex items-baseline gap-1 border-b pb-2 mb-2 font-semibold">
                {{- yield icon(name="o-note") -}}
                <span class="grow">{{ x.Note }}</span>
              </p>
            {{- end -}}
            <blockquote class="text-sm italic">{{- shortText(x.Text, 100) -}}</blockquote>
          </a>
          <span class="no-js:hidden flex-shrink-0">
            <button class="block -mt-4 -mr-4
             text-gray-600 opacity-0
             group-hover/btn:opacity-100 group-focus-within/btn:opacity-100
             hf:text-red-700 touch:opacity-75 touch:active:text-red-700
             "
             data-action="click->request#fetch"
             data-request-url-param="{{ urlFor(`/api/bookmarks`, .Item.ID, `annotations`, x.ID) }}"
             data-request-method-param="delete"
             data-request-event-name-param="annotation-removed"
             aria-label="{{ gettext(`Delete highlight`) }}"
            >{{ yield icon(name="o-cross", class="svgicon rounded-full bg-app-bg", svgClass="w-5 align-bottom") }}</button>
          </span>
          </li>
      {{- end -}}
      </ul>
    {{- end -}}
  </div>
</turbo-frame>