{{ $page := .page }}
{{ $index := .index }}
{{ $position := "left" }}
{{ if (eq (mod $index 2) 1) }}
  {{ $position = "right" }}
{{ end }}

<article class="timeline-item {{ $position }}" data-type="{{ $page.Params.type }}">
  <div class="timeline-dot"></div>
  
  <div class="article-card">
    {{ if $page.Params.image }}
      <div class="article-card-image">
        <img src="{{ $page.Params.image }}" alt="{{ $page.Title }}" loading="lazy">
      </div>
    {{ end }}

    <div class="article-card-body">
      <div class="article-card-header">
        <span class="article-type-badge type-{{ $page.Params.type }}">{{ $page.Params.type }}</span>
        <span class="article-date">{{ $page.Date.Format "Jan 02, 2006" }}</span>
      </div>
      <h3 class="article-card-title">
        <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
      </h3>
      {{ with $page.Params.description }}
        <p class="article-card-excerpt">{{ . }}</p>
      {{ end }}
    </div>
  </div>
</article>