{% extends "base.html" %}

{% block content %}
{% set data = load_data(path="data/projects.toml") %}
{% set_global total = 0 %}
{% set_global flagships = [] %}
{% for category in data.category %}
  {% set n = category.project | length %}
  {% set_global total = total + n %}
  {% for p in category.project %}
    {% if p.flagship %}{% set_global flagships = flagships | concat(with=[p]) %}{% endif %}
  {% endfor %}
{% endfor %}

<header class="site-header">
  <span class="eyebrow">~/breadway.dev</span>
  <div class="brand">
    <svg class="mark" width="34" height="34" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M4 20c0-7.2 4.5-12 10-12s10 4.8 10 12" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
      <path d="M4 20h20" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
      <path d="M10 11l2 3M14 9.5l2 4M18 11l2 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
    </svg>
    <h1>Breadway</h1>
  </div>
  <p class="tagline">Curated catalog of BOS desktop tools and other personal projects — not the bakery registry.</p>
  <p class="stats"><strong>{{ total }}</strong> projects across <strong>{{ data.category | length }}</strong> categories</p>
</header>

<section class="featured">
  <div class="featured-grid">
  {% for p in flagships %}
    <div class="feature-card">
      <div class="entry-head">
        <span class="entry-name">{{ p.name }}</span>
        {% if p.source %}<a class="entry-source" href="{{ p.source }}">source</a>{% endif %}
      </div>
      <div class="entry-meta"><span class="lang">{{ p.lang }}</span><span class="sep">·</span><span class="role">{{ p.role }}</span></div>
      <p class="entry-desc">{{ p.description }}</p>
    </div>
  {% endfor %}
  </div>
</section>

<main>
{% for category in data.category %}
  {% if category.name == "Desktop / BOS" %}{% set cat_class = "cat-ecosystem" %}
  {% elif category.name == "Hardware & Firmware" %}{% set cat_class = "cat-hardware" %}
  {% else %}{% set cat_class = "cat-misc" %}{% endif %}
  <section class="group {{ cat_class }}">
    <div class="group-head">
      {% if category.name == "Desktop / BOS" %}
      <svg class="group-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <polyline points="4 17 10 11 4 5"></polyline>
        <line x1="12" y1="19" x2="20" y2="19"></line>
      </svg>
      {% elif category.name == "Hardware & Firmware" %}
      <svg class="group-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <rect x="6" y="6" width="12" height="12" rx="1"></rect>
        <rect x="9" y="9" width="6" height="6"></rect>
        <line x1="9" y1="1" x2="9" y2="4"></line>
        <line x1="15" y1="1" x2="15" y2="4"></line>
        <line x1="9" y1="20" x2="9" y2="23"></line>
        <line x1="15" y1="20" x2="15" y2="23"></line>
        <line x1="20" y1="9" x2="23" y2="9"></line>
        <line x1="20" y1="15" x2="23" y2="15"></line>
        <line x1="1" y1="9" x2="4" y2="9"></line>
        <line x1="1" y1="15" x2="4" y2="15"></line>
      </svg>
      {% else %}
      <svg class="group-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z"></path>
      </svg>
      {% endif %}
      <h2>{{ category.name }}</h2>
      <span class="group-count">{{ category.project | length }}</span>
    </div>
    <ul class="entries">
    {% for p in category.project %}
      {% if not p.flagship %}
      <li class="entry">
        <div class="entry-head">
          <span class="entry-name">{{ p.name }}</span>
          {% if p.source %}<a class="entry-source" href="{{ p.source }}">source</a>{% endif %}
        </div>
        <div class="entry-meta"><span class="lang">{{ p.lang }}</span><span class="sep">·</span><span class="role">{{ p.role }}</span></div>
        <p class="entry-desc">{{ p.description }}</p>
        {% if p.tags and p.tags | length > 0 %}
        <div class="tags">
          {% for t in p.tags %}<span class="tag">{{ t }}</span>{% endfor %}
        </div>
        {% endif %}
      </li>
      {% endif %}
    {% endfor %}
    </ul>
  </section>
{% endfor %}
</main>

<footer class="site-footer">
  <span>Breadway</span>
  <span>built with Zola</span>
</footer>
{% endblock content %}