{*
  This fragment (thumbnail-dt.jet.html) templates in the artwork thumbnail
*}
{{- target := CookieList["pixivfe-ThumbnailToNewTab"] }}
{{- hideR18 := CookieList["pixivfe-HideArtR18"] }}
{{- hideR18G := CookieList["pixivfe-HideArtR18G"] }}
{{- hideAi := CookieList["pixivfe-HideArtAI"] }}
{{- AiType := isset(.AiType) ? .AiType : 0}}
<div class="position-relative h-100 thumbnail-hover-dark mb-2">
  <div> {* Empty div for the illust preview (it needs to wrap the anchor) *}
    <a
      target="{{ target }}"
      href="/artworks/{{ .ID }}"
    >
    <div class="position-absolute top-0 start-0 p-2 d-flex justify-content-between w-100">
      <div class="d-flex flex-column align-items-start z-3">
        {* When an artwork is listed on the ranking page *}
        {{- if isset(.Rank) }}
        <span class="badge bg-black fs-6 rounded-pill bg-opacity-75 mb-1">{{ .Rank }}</span>
        {{- end }}
        {* When an artwork is tagged as R-18 or R-18G *}
        {{- if .XRestrict != 0 }}
        <span class="badge bg-danger mb-1">{{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }}</span>
        {{- end }}
        {* When an artwork is tagged as AI-generated *}
        {{- if AiType == 2 }}
        <span class="badge bg-warning small text-dark mb-1">AI</span>
        {{- end }}
      </div>
      <div class="d-flex flex-column align-items-end z-3">
        {* When an artwork has multiple images *}
        {{- if .Pages > 1 }}
        <span class="badge bg-secondary"><i class="bi bi-image"></i> {{ .Pages }}</span>
        {{- end }}
      </div>
    </div>
      <div class="ratio ratio-1x1">
        <div class="thumbnail-wrapper rounded overflow-hidden">
          {{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
          {* When the user has enabled hideR18 or hideR18G, display a plain thumbnail instead *}
          <img src="/img/nsfw.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
          {* When the user has enabled hideAi, display a plain thumbnail instead *}
          {{- else if AiType == 2 && hideAi }}
          <img src="/img/ai.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
          {{- else }}
          <img
            src="{{ .Thumbnail }}"
            alt="{{ .Title }}"
            class="img-fluid object-fit-cover w-100 h-100"
            loading="lazy"
          />
          {{- end }}
        </div>
      </div>
      {* When an artwork is a ugoira *}
      {* Creates a centered, circular overlay (60x60px) with semi-transparent black background.
           The play icon is centered within this overlay and appears on top of the thumbnail. *}
      {{- if .IllustType == 2 }}
      <div class="position-absolute top-50 start-50 translate-middle d-flex justify-content-center align-items-center bg-dark bg-opacity-75 rounded-circle w-25 h-25 p-4">
        <i class="bi bi-play-fill text-white fs-2"></i>
      </div>
      {{- end }}
    </a>
  </div>
</div>