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

<header class="project-info-header">
  <div class="project-title-row">
    <h1 class="project-title">{{title}}</h1>

    <div class="project-actions" style="display: flex; gap: 1rem;">
      {{#if demo_url}}
        <a href="{{demo_url}}" class="repo-button" target="_blank" rel="noopener">
          {{demo_label}}
        </a>
      {{/if}}
      {{#if repository}}
        <a href="{{repository}}" class="repo-button" target="_blank" rel="noopener">
          <span class="icon">git</span> View Source
        </a>
      {{/if}}
    </div>
  </div>

  <div class="project-metadata">
    {{#if created}}
      <div class="meta-item">
        <span class="meta-label">Started</span>
        <span class="meta-value">{{created}}</span>
      </div>
    {{/if}}

    {{#if updated}}
      <div class="meta-item">
        <span class="meta-label">Last Activity</span>
        <span class="meta-value">{{updated}}</span>
      </div>
    {{/if}}

    {{#if tags}}
      <div class="meta-item">
        <span class="meta-label">Tags</span>
        <div class="tag-list">
          {{#each tags}}
            <span class="tag">#{{this}}</span>
          {{/each}}
        </div>
      </div>
    {{/if}}
  </div>
  <hr class="project-divider">
</header>