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

SPDX-License-Identifier: AGPL-3.0-only
*}
{{- import "/_libs/common" -}}
{{- import "./card_blocks" -}}
{{- import "./common" -}}
{{- textArch := .IsArchived ? gettext("Remove from archive") : gettext("Move to archive") -}}
{{- textFav := .IsMarked ? gettext("Remove from favorites") : gettext("Add to favorites") -}}

{{- _url := urlFor(`/bookmarks`, .ID) }}

<turbo-frame id="bookmark-card-{{ .ID }}"
  {{- if !.Loaded && !.IsDeleted }}
  data-controller="turbo-refresh"
  data-turbo-refresh-interval-value="2"
  data-turbo-refresh-on-value="[data-loading]"
  data-turbo-refresh-src-value="{{ urlFor(`/bookmarks`, .ID, `card`) }}"
  {{ end }}
  {{- if .IsDeleted }}
  data-bookmark-deleted="true"
  {{ end }}
>
{{- yield card(isDeleted=.IsDeleted, isLoading=!.Loaded) content -}}
  {{- if !.Loaded -}}
    <div class="bookmark-card--img">
      {{- yield card_image(src=urlFor(`/assets/rnd`, checksum(.URL)) + ".svg",
                           width=256, height=160) -}}
    </div>
    <div class="bookmark-card--spinner">
      {{- yield spinner() -}}
      <p>{{ pgettext("bookmark", "Loading") }} {{ .Site }}…</p>
    </div>
  {{- else -}}
    {{- if .DocumentType == "photo" -}}
      {{- yield icon(name="o-photo") -}}
    {{- else if .DocumentType == "video" -}}
      {{- yield icon(name="o-video") -}}
    {{- end -}}
    <span class="bookmark-card--img">
      {{ if isset(.Resources.thumbnail) -}}
        {{- yield card_image(src=.Resources.thumbnail.Src,
                             width=.Resources.thumbnail.Width,
                             height=.Resources.thumbnail.Height) -}}
      {{- else -}}
        {{- yield card_image(src=urlFor(`/assets/rnd`, checksum(.URL)) + ".svg",
                             width=256, height=144) -}}
      {{- end }}
    </span>

    {{- if .ReadProgress > 0 -}}
      <div class="bookmark-card--progress">
        {{- yield progress_circle(value=.ReadProgress) -}}
      </div>
    {{- end -}}

    <div class="bookmark-card--ico">
      {{- if isset(.Resources.icon) -}}
        <img loading="lazy" src="{{ .Resources.icon.Src }}" alt=""
          width="{{ .Resources.icon.Width }}" height="{{ .Resources.icon.Height }}">
      {{- else -}}
        {{- yield icon(name="o-circle", class="svgicon text-gray-600") -}}
      {{- end -}}
    </div>
    <div class="bookmark-card--title">
      <h3><a dir="{{ default(.TextDirection, `ltr`) }}"
      href="{{ _url }}" data-turbo-frame="_top"
      >{{ shortText(default(.Title, "untitled"), 90) }}</a></h3>
    </div>
    <div class="bookmark-card--meta">
      <strong title="{{ .SiteName }}"
       dir="{{ default(.TextDirection, `ltr`) }}">{{ shortText(.SiteName, 50) }}</strong>
      {{- if .ReadingTime > 0 -}}
        <span> •&nbsp;{{npgettext("abbr", "%d min", "%d min", .ReadingTime, .ReadingTime)}}</span>
      {{- end -}}
    </div>
    {{ if len(.Labels) -}}
      <div class="bookmark-card--labels">
        <ul>
        {{- range .Labels -}}
          <li><a href="{{ urlFor(`/bookmarks/labels`) }}?name={{ url(.) }}">{{ . }}</a></li>
        {{- end -}}
        </ul>
      </div>
    {{- end }}
  {{ end -}}

  {{- if .IsDeleted -}}
    <div class="bookmark-card--deleted">
      <span>
        {{ gettext("This bookmark will be removed in a few seconds.") }}
      </span>
      <form action="{{ _url }}/update" method="post">
        <input type="hidden" name="cancel" value="1" />
        <input type="hidden" name="_to" value="{{ currentPath }}" />
        <button type="submit" name="is_deleted" value="0"
         data-controller="turbo-form">
          {{- yield icon(name="o-undo") }} {{ gettext("Cancel") -}}
        </button>
      </form>
    </div>
  {{- else -}}
    <div class="bookmark-card--actions">
        <form action="{{ _url }}/update" method="post"
         data-controller="turbo-form turbo-reload">
          <input type="hidden" name="_to" value="{{ currentPath }}" />
          {{- if .Loaded -}}
            <button name="is_marked" value="{{ .IsMarked ? 0 : 1 }}"
             title="{{ textFav }}">
              {{ yield icon(name=(.IsMarked ? "o-favorite-on" : "o-favorite-off")) }}
            </button>
            <button name="is_archived" value="{{ .IsArchived ? 0 : 1 }}"
             title="{{ textArch }}">
              {{ yield icon(name=(.IsArchived ? "o-archive-on" : "o-archive-off")) }}
            </button>
          {{- end -}}
          <a href="{{ .URL }}" target="_blank" title="{{ gettext(`Go to original page`) }}">
            {{ yield icon(name="o-link-ext") }}
          </a>
        </form>

      <form action="{{ _url }}/update" method="post">
        <input type="hidden" name="_to" value="{{ currentPath }}" />
        <button name="is_deleted" value="1"
         data-controller="turbo-form"
         title="{{ gettext(`Delete this bookmark`) }}">
          {{ yield icon(name="o-trash") }}
        </button>
      </form>
    </div>
  {{- end -}}
{{- end -}}
</turbo-frame>