{{ define "main" }}
  {{- partial "background.html" . -}}

  <main class="page-content">
    <h1>{{ .Title }}</h1>

    <div class="project-grid">
      {{ if .Pages }}
        {{ range .Pages.ByDate.Reverse }}
          <a href="{{ .RelPermalink }}" class="project-card">
            {{ with .Params.image }}
              <img src="{{ . }}" alt="{{ $.Title }}" />
            {{ end }}
            <h2>{{ .Title }}</h2>
            <p class="tags">
              {{ range .Params.tags }}
                <span class="tag">{{ . }}</span>
              {{ end }}
            </p>
            <p>{{ .Params.summary }}</p>
          </a>
        {{ end }}
      {{ else }}
        <div class="coming-soon">
          <span class="coming-soon-icon">🚀</span>
          <h2>More projects coming soon</h2>
          <p>I'm currently working on new things — stay tuned!</p>
          <span class="coming-soon-dots"><span>.</span><span>.</span><span>.</span></span>
        </div>
      {{ end }}
    </div>

    <footer class="article-footer">
      <a href="/">← back</a>
    </footer>
  </main>
{{ end }}