{% extends "base.html" %}

{% from "chirpui/badge.html" import badge %}
{% from "chirpui/hero.html" import page_hero %}
{% from "chirpui/layout.html" import cluster, container, stack %}
{% from "chirpui/metric_grid.html" import metric_card, metric_grid %}
{% from "chirpui/rendered_content.html" import rendered_content %}
{% from "chirpui/surface.html" import surface %}

{% 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 %}

<div data-chirp-theme-surface="notebook">
{% call container(cls="chirp-theme-learning-page chirp-theme-notebook-page") %}
  {% call stack(gap="lg") %}
    {% call page_hero(title=title, subtitle=description, variant="minimal", background="solid", cls="chirp-theme-learning-hero chirp-theme-notebook-hero") %}
      {% slot eyebrow %}
      {% call cluster(gap="xs", cls="chirp-theme-notebook-eyebrow") %}
        {{ badge("Notebook", variant="info") }}
        {% if language %}{{ badge(language, variant="muted") }}{% end %}
        {% if nb_date %}{{ badge(nb_date | dateformat("%B %d, %Y"), variant="muted") }}{% end %}
      {% end %}
      {% end %}
    {% end %}

    {% if cell_count > 0 or kernel_name or language %}
    {% call metric_grid(cols=3, gap="md", cls="chirp-theme-notebook-meta") %}
      {{ metric_card(value=cell_count, label="Cells", icon="list") }}
      {{ metric_card(value=kernel_name | default("—"), label="Kernel", icon="gear") }}
      {{ metric_card(value=language | default("—"), label="Language", icon="bolt") }}
    {% end %}
    {% end %}

    {% call surface(variant="default", cls="chirp-theme-notebook-surface") %}
      {% if content %}
      {% call rendered_content(compact=false, 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 %}
{% end %}
</div>
{% end %}