{#
  ─────────────────────────────────────────────
   SPB Git — Personal Git Platform
  ─────────────────────────────────────────────
   Author  : Simon-Pierre Boucher
   Contact : contact@spboucher.ai
   File    : src/web/views/home.njk
   Purpose : Home — hero, pinned repos, repo index, activity, heatmap
   License : MIT © Simon-Pierre Boucher
  ─────────────────────────────────────────────
#}{% extends "layout.njk" %}
{% block content %}
<section class="hero">
  <div class="hero-id">
    <div class="hero-avatar" aria-hidden="true">SPB</div>
    <div>
      <h1 class="hero-name">{{ owner.name }}</h1>
      <p class="hero-tagline">{{ owner.tagline }} · <a href="mailto:{{ owner.email }}">{{ owner.email }}</a></p>
    </div>
  </div>
  <div class="hero-badges">
    <span class="badge-stat"><strong>{{ stats.repos | num }}</strong> repos</span>
    <span class="badge-stat"><strong>{{ stats.commits | num }}</strong> commits</span>
    <span class="badge-stat"><strong>{{ stats.languages | num }}</strong> languages</span>
  </div>
</section>

{% if pinned.length %}
<section aria-labelledby="pinned-h">
  <h2 id="pinned-h" class="section-title">Pinned</h2>
  <div class="pinned-grid">
    {% for repo in pinned %}{% include "partials/repo-card.njk" %}{% endfor %}
  </div>
</section>
{% endif %}

<div class="home-columns">
  <section class="home-main" aria-labelledby="repos-h">
    <div class="repo-controls">
      <h2 id="repos-h" class="section-title">Repositories</h2>
      <div class="repo-filters">
        <input type="search" id="repo-filter" placeholder="Filter repositories…" aria-label="Filter repositories">
        <select id="repo-sort" aria-label="Sort repositories">
          <option value="pushed">Recently pushed</option>
          <option value="name">Name</option>
          <option value="created">Created</option>
        </select>
        <select id="repo-lang" aria-label="Filter by language">
          <option value="">All languages</option>
          {% for lang in languages %}<option value="{{ lang }}">{{ lang }}</option>{% endfor %}
        </select>
        <select id="repo-topic" aria-label="Filter by topic">
          <option value="">All topics</option>
          {% for topic in topics %}<option value="{{ topic }}">{{ topic }}</option>{% endfor %}
        </select>
      </div>
    </div>
    <div class="repo-list" id="repo-list">
      {% for repo in overviews %}{% include "partials/repo-card.njk" %}{% endfor %}
      {% if not overviews.length %}
      <div class="empty-state">
        <p>No repositories yet. Create the first one:</p>
        <pre class="clone-snippet">spbgit create hello-world --push</pre>
      </div>
      {% endif %}
    </div>
    <p class="muted" id="repo-list-empty" hidden>No repository matches the current filters.</p>
  </section>

  <aside class="home-side">
    <section aria-labelledby="activity-h">
      <h2 id="activity-h" class="section-title">Activity</h2>
      <ul class="activity-feed">
        {% for event in activity %}
        <li>
          <span class="activity-dot" aria-hidden="true"></span>
          <div>
            {% if event.deleted %}
              deleted {{ event.refType }} <code>{{ event.ref }}</code> in <a href="/{{ event.repo }}">{{ event.repo }}</a>
            {% else %}
              pushed {{ event.commits | num }} commit{{ 's' if event.commits != 1 }} to <a href="/{{ event.repo }}">{{ event.repo }}</a>
              {% if event.refType == 'tag' %}(tag <code>{{ event.ref }}</code>){% elif event.ref != overviewDefault %}<code class="ref-inline">{{ event.ref }}</code>{% endif %}
            {% endif %}
            <span class="muted">· {{ event.at | reltime }}</span>
          </div>
        </li>
        {% else %}
        <li class="muted">No pushes recorded yet.</li>
        {% endfor %}
      </ul>
    </section>
  </aside>
</div>

<section aria-labelledby="heatmap-h" class="heatmap-section">
  <h2 id="heatmap-h" class="section-title">{{ heatmap.total | num }} commits in the last year</h2>
  <div class="heatmap-scroll">{{ heatmap.svg | safe }}</div>
  <div class="heatmap-legend" aria-hidden="true">
    <span>Less</span>
    <span class="heatmap-cell-demo" data-level="0"></span>
    <span class="heatmap-cell-demo" data-level="1"></span>
    <span class="heatmap-cell-demo" data-level="2"></span>
    <span class="heatmap-cell-demo" data-level="3"></span>
    <span class="heatmap-cell-demo" data-level="4"></span>
    <span>More</span>
  </div>
</section>
{% endblock %}