{% extends "base.html" %}

{% from "chirpui/layout.html" import cluster, container, stack %}
{% from "chirpui/rendered_content.html" import rendered_content %}

{% block content %}
{% let title = page?.title ?? "Notebook" %}
{% let description = page?.description ?? params?.description ?? "Executable notes and outputs." %}
{% let nb = params?.notebook ?? {} %}
{% let cell_count = nb?.cell_count ?? 0 %}
{% let kernel_name = nb?.kernel_name ?? "" %}
{% let language = nb?.language_version ?? "" %}
{% let nb_date = page?.metadata?.date ?? page?.date %}
{% let nb_slug = page?.slug ?? "notebook" %}

<div data-chirp-theme-surface="notebook">
{% call container(cls="chirp-theme-learning-page chirp-theme-notebook-page") %}
  {% call stack(gap="md", cls="chirp-theme-notebook-shell") %}

    <header class="chirp-theme-notebook-header">
      {# Terminal/IDE window chrome — signals "dev tool" without a full skin. #}
      <div class="chirp-theme-notebook-chrome">
        <span class="chirp-theme-notebook-chrome__dots" aria-hidden="true">
          <span class="chirp-theme-notebook-chrome__dot"></span>
          <span class="chirp-theme-notebook-chrome__dot"></span>
          <span class="chirp-theme-notebook-chrome__dot"></span>
        </span>
        <span class="chirp-theme-notebook-chrome__file">{{ nb_slug }}.ipynb</span>
        {% if kernel_name %}
        <span class="chirp-theme-notebook-chrome__kernel">
          <span class="chirp-theme-notebook-chrome__pulse" aria-hidden="true"></span>
          <span class="chirp-theme-notebook-chrome__kernel-label">kernel:</span>
          {{ kernel_name }}
        </span>
        {% end %}
      </div>

      <div class="chirp-theme-notebook-titlebar">
        <h1 class="chirp-theme-notebook-title">{{ title }}</h1>
        {% if description %}
        <p class="chirp-theme-notebook-lede">{{ description }}</p>
        {% end %}
      </div>

      {% if language or cell_count > 0 or nb_date %}
      {% call cluster(gap="xs", cls="chirp-theme-notebook-statusline") %}
        {% if language %}
        <span class="chirp-theme-notebook-stat">
          <span class="chirp-theme-notebook-stat__key">lang</span>
          <span class="chirp-theme-notebook-stat__val">{{ language }}</span>
        </span>
        {% end %}
        {% if cell_count > 0 %}
        <span class="chirp-theme-notebook-stat">
          <span class="chirp-theme-notebook-stat__key">cells</span>
          <span class="chirp-theme-notebook-stat__val">{{ cell_count }}</span>
        </span>
        {% end %}
        {% if nb_date %}
        <span class="chirp-theme-notebook-stat">
          <span class="chirp-theme-notebook-stat__key">run</span>
          <span class="chirp-theme-notebook-stat__val">{{ nb_date | dateformat("%Y-%m-%d") }}</span>
        </span>
        {% end %}
      {% end %}
      {% end %}
    </header>

    {% if content %}
    {% call rendered_content(compact=true, cls="chirp-theme-notebook-content chirp-theme-learning-content") %}
    {{ content | safe }}
    {% end %}
    {% else %}
    <p class="chirpui-text-muted">This notebook has no rendered cells yet.</p>
    {% end %}
  {% end %}
{% end %}
</div>
{% end %}