<article class="article-single">
  <!-- Article Hero -->
  {{ if .Params.image }}
    <div class="article-hero" style="background-image: url('{{ .Params.image }}')">
      <div class="article-hero-overlay"></div>
      <div class="article-hero-content">
        <nav class="article-breadcrumb">
          <a href="/articles/">Articles</a>
          <span>/</span>
          <span>{{ .Title }}</span>
        </nav>
        <h1>{{ .Title }}</h1>
      </div>
    </div>
  {{ end }}

  <!-- Article Meta Bar -->
  <div class="article-meta-bar">
    <div class="article-meta">
      <span class="article-type-badge type-{{ .Params.type }}">{{ .Params.type }}</span>
      <span class="article-date">{{ .Date.Format "Jan 02, 2006" }}</span>
      <span class="article-read-time">{{ .ReadingTime }} min read</span>
    </div>
  </div>

  <!-- Share Sidebar (for large screens) -->
  {{ partial "share-sidebar.html" . }}

  <!-- Article Body -->
  <div class="article-body container-narrow">
    {{ .Content }}
  </div>

  <!-- Article Footer Nav -->
  {{ $section := .Site.GetPage .Section }}
  {{ if $section }}
    {{ $prevPage := .PrevInSection }}
    {{ $nextPage := .NextInSection }}
    {{ if or $prevPage $nextPage }}
      <nav class="article-footer-nav">
        {{ if $prevPage }}
          <a href="{{ $prevPage.RelPermalink }}" class="nav-prev">
            <span class="nav-label">← Previous</span>
            <span class="nav-title">{{ $prevPage.Title }}</span>
          </a>
        {{ end }}
        {{ if $nextPage }}
          <a href="{{ $nextPage.RelPermalink }}" class="nav-next">
            <span class="nav-label">Next →</span>
            <span class="nav-title">{{ $nextPage.Title }}</span>
          </a>
        {{ end }}
      </nav>
    {{ end }}
  {{ end }}
</article>
