{{/* Handle both calling conventions: dict with .Page/.side or direct page */}}
{{ $page := . }}
{{ $side := "left" }}

{{ if reflect.IsMap . }}
  {{ $page = .Page }}
  {{ $side = .side | default "left" }}
{{ end }}

{{ $articleType := $page.Params.type | default "life" }}
{{ $typeConfig := $page.Site.Params.articleTypes }}
{{ $typeData := index $typeConfig $articleType }}
{{ $excerpt := $page.Params.excerpt | default $page.Description | default $page.Summary }}

{{ $imageURL := "" }}
{{ $useDefaultThumbnail := false }}
{{ if $page.Params.image }}
  {{ $resource := $page.Resources.GetMatch $page.Params.image }}
  {{ if $resource }}
    {{ $imageURL = $resource.RelPermalink }}
  {{ else }}
    {{ $imageURL = $page.Params.image }}
  {{ end }}
{{ else }}
  {{ $useDefaultThumbnail = true }}
{{ end }}

<li class="timeline-item timeline-item--{{ $side }}" style="--type-color: var(--type-{{ $articleType }});">
  {{/* Decorative connector line */}}
  <div class="timeline-connector" aria-hidden="true"
       style="background-color: var(--type-{{ $articleType }});"></div>

  {{/* Node on spine */}}
  <div class="timeline-node" aria-hidden="true"
       style="background-color: var(--type-{{ $articleType }}); box-shadow: 0 0 10px color-mix(in srgb, var(--type-{{ $articleType }}) 50%, transparent);"></div>

  <article class="timeline-card group"
           style="border-color: color-mix(in srgb, var(--type-{{ $articleType }}) 25%, transparent);
                  box-shadow: 0 0 18px color-mix(in srgb, var(--type-{{ $articleType }}) 10%, transparent);">

    {{/* Thumbnail */}}
    <a href="{{ $page.RelPermalink }}" class="timeline-thumb" tabindex="-1" aria-hidden="true">
      {{ if $useDefaultThumbnail }}
      <picture>
        <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" />
        <img src="/images/default_thumbnail_dark.png"
             alt=""
             loading="lazy" />
      </picture>
      {{ else }}
      <img src="{{ $imageURL }}"
           alt=""
           loading="lazy" />
      {{ end }}
    </a>

    {{/* Text body */}}
    <div class="timeline-body">

      {{/* Pinned badge */}}
      {{ if $page.Params.pinned }}
      <div class="timeline-pinned" style="color: {{ $page.Site.Params.secondaryAccent }};">
        📌 {{ i18n "pinned" | default "PINNED" }}
      </div>
      {{ end }}

      {{/* Type + date meta row */}}
      <div class="timeline-meta" style="color: var(--type-{{ $articleType }});">
        {{ i18n $articleType | upper }}
        <span class="timeline-meta-sep" aria-hidden="true">·</span>
        <time class="timeline-date"
              datetime="{{ $page.PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
          {{ $page.PublishDate.Format "Jan 2, 2006" }}
        </time>
      </div>

      {{/* Title */}}
      <h3 class="timeline-title">
        <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
      </h3>

      {{/* Excerpt */}}
      {{ if $excerpt }}
      <p class="timeline-excerpt">{{ $excerpt | plainify }}</p>
      {{ end }}

      {{/* CTA */}}
      <a href="{{ $page.RelPermalink }}" class="btn btn-sm mt-auto">
        {{ i18n "readMore" }}
        <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
      </a>

    </div>
  </article>
</li>