{{- $context := . -}}
{{- $link := .Get "link" -}}
{{- $title := .Get "title" -}}
{{- $icon := .Get "icon" -}}
{{- $subtitle := .Get "subtitle" -}}
{{- $image := .Get "image" -}}
{{- $width := 0 -}}
{{- $height := 0 -}}

{{/* Image processing options */}}
{{- $method := .Get "method" | default "Resize" | humanize -}}
{{- $options := .Get "options" | default "800x webp q80" -}}

{{- if and $image (not (urls.Parse $image).Scheme) -}}
  {{/* Process images in assets */}}
  {{- with resources.Get $image -}}
    {{- $processed := "" -}}
    {{- if eq $method "Resize" -}}
      {{- $processed = (.Resize $options) -}}
    {{- else if eq $method "Fit" -}}
      {{- $processed = (.Fit $options) -}}
    {{- else if eq $method "Fill" -}}
      {{- $processed = (.Fill $options) -}}
    {{- else if eq $method "Crop" -}}
      {{- $processed = (.Crop $options) -}}
    {{- else -}}
      {{- errorf "Invalid image processing command: Must be one of Crop, Fit, Fill or Resize." -}}
    {{- end -}}
    {{- $width = $processed.Width -}}
    {{- $height = $processed.Height -}}
    {{- $image = $processed.RelPermalink -}}
  {{- else -}}
    {{/* Otherwise, use relative link of the image */}}
    {{- $image = ($image | relURL) -}}
  {{- end -}}
{{- end -}}

{{ $linkClass := "hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900" }}
{{- with $image -}}
  {{ $linkClass = "hover:border-gray-300 bg-gray-100 shadow dark:border-neutral-700 dark:bg-neutral-800 dark:text-gray-50 hover:shadow-lg dark:hover:border-neutral-500 dark:hover:bg-neutral-700" }}
{{- end -}}

{{- $external := strings.HasPrefix $link "http" -}}
{{- $href := cond (strings.HasPrefix $link "/") ($link | relURL) $link -}}


<a
  class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 {{ $linkClass }}"
  href="{{ $href }}"
  {{- if $external }}
    target="_blank" rel="noreferrer"
  {{- end -}}
>
  {{- with $image -}}
    <img
      alt="{{ $title }}"
      loading="lazy"
      decoding="async"
      style="color: transparent;"
      src="{{ $image | safeURL }}"
      {{ with $width }}width="{{ . }}"{{ end }}
      {{ with $height }}height="{{ . }}"{{ end }}
    />
  {{- end -}}

  {{- $padding := "p-4" -}}
  {{- with $subtitle -}}
    {{- $padding = "pt-4 px-4" -}}
  {{- end -}}


  <span class="flex font-semibold items-start gap-2 {{ $padding }} text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
    {{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{- end -}}
    {{- $title -}}
  </span>
  {{- with $subtitle -}}
    <div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{- $subtitle | markdownify -}}</div>
  {{- end -}}
</a>