{#- 프로젝트 한 장. 두 등급뿐이다: 랜딩이거나 브리프거나. 중간 등급을 만들면
    어느 프로젝트가 어디에 속하는지 매번 새로 판단해야 한다.

    등급은 `tier` 가 정하지만 블록의 유무는 데이터가 정한다 — features 가 []
    면 그 섹션이 없다. 빈 배열이 이미 "없음"이라 플래그를 따로 두지 않는다.

    별 개수는 tools/stars.py 가 front matter 에 구워 둔 값이다. 렌더 중에
    네트워크를 부르면 재현되는 빌드가 아니게 되고, 브라우저에서 부르면 익명
    API 한도(IP 당 60/시간)에 걸린다. 0 이어도 보여 준다 — 그게 사실이고,
    없는 항목만 숫자가 빠지면 줄이 어긋난다. #}
{% extends "base.html" %}
{% from "partials/icons.html" import i_out, i_arrow %}
{% from "partials/lang.html" import lang_switch %}

{% block content %}
<div class="{{ "wrap" if page.extra.tier == "landing" else "wrap wrap-read" }} project" data-tier="{{ page.extra.tier }}"
     {%- if page.extra.accent %} style="--accent: {{ page.extra.accent }}"{% endif %}>

  {%- if page.section %}
  <a class="back" href="{{ page.section.url }}">
    <svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H6M11 6l-6 6 6 6"/></svg>
    <span>{{ page.section.title }}</span>
  </a>
  {%- endif %}

  <header class="hero">
    <div class="hero-main">
      {%- if page.extra.eyebrow %}
      <p class="eyebrow">{{ page.extra.eyebrow }}</p>
      {%- endif %}
      {#- 이름 옆의 작은 마크가 명패의 시작이다. 없으면 이름만 선다. #}
      <h1 class="hero-name">
        {%- if page.extra.mark %}<span class="chip-mark" style="--mark-src: url('/{{ page.extra.mark }}')" aria-hidden="true"></span>
        {%- elif page.extra.logo %}<span class="chip-mark" aria-hidden="true"><img src="{{ asset(page.extra.logo) }}" alt=""></span>
        {%- endif %}
        <span>{{ page.title }}</span>
      </h1>
      {%- if page.extra.tagline %}
      <p class="hero-tagline">{{ page.extra.tagline }}</p>
      {%- endif %}

      <ul class="badges">
        {%- if page.extra.lang %}<li>{{ page.extra.lang }}</li>{% endif %}
        {%- if page.extra.license %}<li>{{ page.extra.license }}</li>{% endif %}
        {%- if page.extra.version %}<li>{{ page.extra.version }}</li>{% endif %}
        {%- if page.extra.platform %}<li>{{ page.extra.platform }}</li>{% endif %}
        {%- if page.extra.repo %}<li class="stars">{{ page.extra.stars }} ★</li>{% endif %}
      </ul>

      {{ lang_switch(page) }}

      {%- if page.extra.actions %}
      <div class="btn-row">
        {%- for a in page.extra.actions %}
        <a class="btn btn-{{ a.style }}" href="{{ a.url }}"{% if a.url is startingwith "http" %} target="_blank" rel="noopener noreferrer"{% endif %}>
          <span>{{ a.label }}</span>{{ i_out() }}
        </a>
        {%- endfor %}
      </div>
      {%- endif %}
    </div>

    {#- 옆칸은 규격이 하나다. 마크 → 로고 → "그림 없음". 좁은 화면에서는 지우지
        않고 위로 올린다 — 지우면 그 프로젝트만 그림이 없는 것처럼 보인다. #}
    <div class="hero-aside" aria-hidden="true">
      {%- if page.extra.mark %}
      <span class="medallion medallion-mark" style="--mark-src: url('/{{ page.extra.mark }}')"></span>
      {%- elif page.extra.logo %}
      <span class="medallion"><img src="{{ asset(page.extra.logo) }}" alt="" loading="eager" decoding="async"></span>
      {%- else %}
      <span class="medallion"><span class="noimg"></span></span>
      {%- endif %}
    </div>
  </header>

  {%- if page.extra.facts %}
  <section class="facts">
    {%- for f in page.extra.facts %}
    <div class="fact">
      <span class="fact-value">{{ f.value }}</span>
      <span class="fact-label">{{ f.label }}</span>
    </div>
    {%- endfor %}
  </section>
  {%- endif %}

  {%- if page.content %}
  <div class="prose">{{ page.content | safe }}</div>
  {%- endif %}

  {%- if page.extra.features %}
  <section class="block">
    <header class="block-head">
      {%- if page.extra.features_eyebrow %}<p class="eyebrow">{{ page.extra.features_eyebrow }}</p>{% endif %}
      {%- if page.extra.features_title %}<h2 class="block-title">{{ page.extra.features_title }}</h2>{% endif %}
      {%- if page.extra.features_intro %}<p class="block-intro">{{ page.extra.features_intro }}</p>{% endif %}
    </header>
    <div class="lattice">
      {%- for f in page.extra.features %}
      <article class="cell">
        {#- 번호는 저자가 적지 않는다. 순서가 곧 번호이므로 루프가 만든다. #}
        <span class="cell-index" aria-hidden="true">{% if loop.index < 10 %}0{% endif %}{{ loop.index }}</span>
        <h3 class="cell-title">{{ f.title }}</h3>
        <p class="cell-desc">{{ f.desc }}</p>
      </article>
      {%- endfor %}
    </div>
  </section>
  {%- endif %}

  {%- if page.extra.session_lines %}
  <section class="block">
    <header class="block-head">
      {%- if page.extra.session_eyebrow %}<p class="eyebrow">{{ page.extra.session_eyebrow }}</p>{% endif %}
      {%- if page.extra.session_title %}<h2 class="block-title">{{ page.extra.session_title }}</h2>{% endif %}
    </header>
    <div class="term">
      <div class="term-bar">
        <span class="term-dots" aria-hidden="true"><i></i><i></i><i></i></span>
        <span class="term-name">{{ page.extra.session_shell }}</span>
      </div>
      <pre class="term-body"><code>{%- for l in page.extra.session_lines %}
<span class="term-{{ l.kind }}">{{ l.text }}</span>
{%- endfor %}</code></pre>
    </div>
    {%- if page.extra.session_caption %}
    <p class="term-caption">{{ page.extra.session_caption }}</p>
    {%- endif %}
  </section>
  {%- endif %}

  {%- if page.extra.cta_title %}
  <section class="cta">
    <div class="cta-inner">
      <h2 class="cta-title">{{ page.extra.cta_title }}</h2>
      {%- if page.extra.cta_text %}<p class="cta-text">{{ page.extra.cta_text }}</p>{% endif %}
      {%- if page.extra.cta_actions %}
      <div class="btn-row">
        {%- for a in page.extra.cta_actions %}
        <a class="btn btn-{{ a.style }}" href="{{ a.url }}"{% if a.url is startingwith "http" %} target="_blank" rel="noopener noreferrer"{% endif %}>
          <span>{{ a.label }}</span>{{ i_arrow() }}
        </a>
        {%- endfor %}
      </div>
      {%- endif %}
    </div>
  </section>
  {%- endif %}
</div>
{% endblock %}