{{#section "styles"}}
<link rel="stylesheet" href="/static/css/projects.css">
{{/section}}

<h1 class="page-title">My Projects</h1>

<div class="projects-intro">
  <p>This site hosts a collection of ongoing and completed technical work. Each project reflects deliberate design choices aligned with minimalism, control, and clarity.</p>
</div>

<div class="projects-grid">
  {{#each projects}}
    <article class="project-card">
      <div class="project-header">
        <h2>
          {{#if target_url}}
            <a href="{{target_url}}" {{#if external}}target="_blank" rel="noopener noreferrer"{{/if}}>{{title}}</a>
          {{else}}
            {{title}}
          {{/if}}
        </h2>
        {{#if node_env_dev}}
          <span class="project-status {{status_class}}">{{status}}</span>
        {{/if}}
      </div>

      <p class="project-description">{{description}}</p>

      <div class="project-links">
        {{#if retrospective_url}}
          <a href="{{retrospective_url}}" class="read-more">Read Retrospective</a>
        {{/if}}

        {{#if demo_url}}
          <a href="{{demo_url}}" class="demo-link">{{demo_label}}</a>
        {{/if}}

        {{#if repository}}
          <a href="{{repository}}" class="repo-link" target="_blank" rel="noopener noreferrer">GitHub Repository</a>
        {{/if}}
      </div>
    </article>
  {{/each}}
</div>