<article class="article-single">
  <!-- Photo 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">
        <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>
    </div>
  </div>

  <!-- Photo Grid -->
  <div class="article-body container-narrow">
    <div class="photo-grid" data-lightbox="true">
      {{ .Content }}
    </div>
  </div>

  <!-- Load photo utilities -->
  {{ $photoUtils := resources.Get "js/photo-utils.js" }}
  {{ $lightbox := resources.Get "js/lightbox.js" | fingerprint }}
  <script src="{{ $photoUtils.RelPermalink }}"></script>
  <script src="{{ $lightbox.RelPermalink }}"></script>
</article>
