{{ $item := .item }}
{{ $fill_image := .config.fill_image | default true }}

{{ $resource := partial "functions/get_featured_image.html" $item }}
{{ $anchor := $item.Params.image.focal_point | default "Center" }}

{{ $link := $item.Params.external_link | default $item.RelPermalink }}
{{ $target := "" }}
{{ if $item.Params.external_link }}
  {{ $link = $item.Params.external_link }}
  {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
{{ end }}

<div class="group cursor-pointer">

  {{ with $resource }}
  {{/* Skip GIF processing */}}
  {{ if ne .MediaType.SubType "gif" }}
    {{/* Process original image first, then create responsive variants */}}
    {{ $original_image := "" }}
    {{if $fill_image}}
      {{ $original_image = .Fill (printf "960x540 %s" $anchor) }}
    {{else}}
      {{ $original_image = .Fit (printf "960x540 %s" $anchor) }}
    {{end}}
    
    {{ $responsive := partial "functions/process_responsive_image.html" (dict 
        "image" $original_image 
        "mode" "responsive"
        "sizes" (slice 480 768 960 1200 1920)
    ) }}
    <div class="overflow-hidden rounded-md bg-gray-100 transition-all hover:scale-105 dark:bg-gray-800">
      <a
        class="relative block aspect-video"
        href="{{ $link }}" {{ $target | safeHTMLAttr }}>

        <img alt="{{ $item.Title | plainify }}"
             class="{{if $fill_image}}object-fill{{else}}object-contain{{end}} transition-all"
             srcset="{{ $responsive.srcset }}"
             sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
             src="{{ $responsive.fallback.RelPermalink }}"
             width="{{ $original_image.Width }}"
             height="{{ $original_image.Height }}"
             decoding="async"
             fetchpriority="high"
             loading="lazy"
             style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;" />
      </a>
    </div>
  {{ else }}
    {{/* Handle GIF without processing */}}
    <div class="overflow-hidden rounded-md bg-gray-100 transition-all hover:scale-105 dark:bg-gray-800">
      <a
        class="relative block aspect-video"
        href="{{ $link }}" {{ $target | safeHTMLAttr }}>

        <img alt="{{ $item.Title | plainify }}"
             class="{{if $fill_image}}object-fill{{else}}object-contain{{end}} transition-all"
             src="{{ .RelPermalink }}"
             width="{{ .Width }}"
             height="{{ .Height }}"
             loading="lazy"
             style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;" />
      </a>
    </div>
  {{ end }}
  {{end}}
  <div class="">
    <div class="">
        <div class="flex gap-3">
          {{ if and $item.Params.tags (gt (len $item.Params.tags) 0) }}
            {{ range $index, $value := first 1 ($item.GetTerms "tags") }}
            <a href="{{.RelPermalink}}"><span
              class="inline-block text-xs font-medium tracking-wider uppercase mt-5 text-primary-700 dark:text-primary-300">{{ .Page.LinkTitle }}</span></a>
            {{end}}
          {{ end }}
        </div>
      <!--          <div class="relative line-clamp-2" style="display: block; height: 4em">-->
      <h2 class="text-lg font-semibold leading-snug tracking-tight mt-2 dark:text-white"><a
        href="{{ $link }}" {{ $target | safeHTMLAttr }}><span
        class="bg-gradient-to-r from-primary-200 to-primary-100 bg-[length:0px_10px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500 hover:bg-[length:100%_3px] group-hover:bg-[length:100%_10px] dark:from-primary-800 dark:to-primary-900">
           {{- $item.Title -}}
           {{if $target}}{{ partial "functions/get_icon" (dict "name" "arrow-top-right-on-square" "attributes" "style=\"height: 1em;\" class=\"inline-flex h-6 w-6 pl-2\"")  }}{{end}}
          </span></a>
      </h2>
      <!--          </div>-->
      <div class="grow"><p class="mt-2 line-clamp-3 text-sm text-gray-500 dark:text-gray-400"><a
        href="{{ $link }}" {{ $target | safeHTMLAttr }}>
        {{ ($item.Params.summary | default $item.Summary) | plainify | htmlUnescape | chomp -}}
      </a></p>
      </div>
      <div class="flex-none">
        <div class="mt-3 flex items-center space-x-3 text-gray-500 dark:text-gray-400 cursor-default">
          <!--          <a href="">-->
          {{ if $item.Params.authors }}
          <div class="flex items-center gap-3">
            {{ if and $item.Params.authors (gt (len $item.Params.authors) 0) }}
              {{ range $index, $value := first 1 ($item.GetTerms "authors") }}
              <div class="relative h-5 w-5 flex-shrink-0">
              {{ $avatar := (.Resources.ByType "image").GetMatch "*avatar*" }}
              {{ if $avatar }}
                {{/* Use a single 2x retina source for a 20px display */}}
                {{ $avatar_40 := $avatar.Process "Fill 40x40 Center webp" }}
                <img alt="avatar"
                     class="rounded-full object-cover"
                     src="{{$avatar_40.RelPermalink}}"
                     width="20"
                     height="20"
                     loading="lazy"
                     decoding="async"
                     style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;" />
              {{ else }}
                {{ warnf "An image named `avatar` was not found in the `%s` folder" $value.Path }}
              {{ end }}
            </div>
            <span class="truncate text-sm">
                {{- .Page.LinkTitle -}}
              </span>
          </div>
          {{end}}
            {{ end }}
          <!--          </a>-->
          <span class="text-xs text-gray-300 dark:text-gray-600">•</span>
          {{end}}
          <time class="truncate text-sm" datetime="{{ time.Format "2006-01-02" $item.Date }}">
          {{- $item.Date | time.Format (site.Params.locale.date_format | default ":date_long") -}}
          </time>
        </div>
      </div>

    </div>
  </div>
</div>