{{ define "main" }}
<div class="projects-page">
  <header>
    <h1 class="post-title">{{ .Title }}</h1>
    {{ with .Content }}
    <div class="page-intro">{{ . }}</div>
    {{ end }}
  </header>

  <div class="project-grid">
    {{ range .Pages }}
    <div class="project-card">
      <h2 class="project-card__title">
        <a href="{{ .Permalink }}">{{ .Title }}</a>
      </h2>

      {{ with .Params.description }}
      <p class="project-card__desc">{{ . }}</p>
      {{ end }}

      {{ with .Params.tags }}
      <ul class="project-tags">
        {{ range . }}<li>{{ . }}</li>{{ end }}
      </ul>
      {{ end }}

      <div class="project-card__links">
        {{ with .Params.github }}<a href="{{ . }}" target="_blank" rel="noopener">GitHub →</a>{{ end }}
        {{ with .Params.url }}<a href="{{ . }}" target="_blank" rel="noopener">Live →</a>{{ end }}
        <a href="{{ .Permalink }}">Details →</a>
      </div>
    </div>
    {{ end }}
  </div>
</div>
{{ end }}