{% extends "base.html" %}

{#
================================================================================
Single Notebook Template (Kida-Native)
================================================================================

Individual Jupyter notebook page. Uses same docs layout and page-hero style
as standard docs: breadcrumbs, title, metadata, download/binder/colab actions.
No legacy action-bar.

FRONTMATTER (from notebook metadata):
---
title: Analysis
type: notebook
notebook:
kernel_name: python3
cell_count: 12
language_version: python
download_url: /path/to/notebook.ipynb (optional, auto from source)
binder_url: https://mybinder.org/... (optional)
colab_url: (optional; auto from repo_url + colab_branch when set in [params])
---

KIDA FEATURES USED:
- {% let %} for template-scoped variables
- Optional chaining (?.) for null-safe access
- Null coalescing (??) for smart defaults
- {% def %} for reusable components
- {% spaceless %} for compact output
================================================================================
#}

{% from 'partials/navigation-components.html' import breadcrumbs, page_navigation, toc %}
{% from 'partials/page-hero/_macros.html' import _breadcrumb_eyebrow, _share_dropdown %}
{% from 'partials/components/tags.html' import tag_list %}

{# =============================================================================
NOTEBOOK ACTION LINK (Download, Binder, Colab)
============================================================================= #}
{% def notebook_action(href, label, icon_name='download') %}
{% if href %}
<a href="{{ href | absolute_url }}" class="page-hero__notebook-action" target="_blank" rel="noopener noreferrer"
  title="{{ label }}">
  {{ icon(icon_name, size=16) }}
  <span>{{ label }}</span>
</a>
{% end %}
{% end %}

{# =============================================================================
MAIN TEMPLATE
============================================================================= #}

{% block content %}
{# Template-scoped variables with null-safe access #}
{% let page_title = page?.title ?? 'Notebook' %}
{% let page_tags = page?.tags ?? [] %}
{% let page_href = page?.href ?? '' %}
{% let download_url = params?.download_url ?? params?.source_url ?? notebook_download_url(page) ?? '' %}
{% let binder_url = params?.binder_url ?? '' %}
{% let colab_url = params?.colab_url ?? notebook_colab_url(page) ?? '' %}
{% let kernel_name = params?.notebook?.kernel_name ?? params?.kernel ?? '' %}
{% let cell_count = params?.notebook?.cell_count ?? 0 %}
{% let css_class = params?.css_class ?? '' %}

{# Three-column documentation layout (same as doc/single) #}
<div class="docs-layout">
  {# Left Sidebar: Navigation #}
  <aside class="docs-sidebar" id="docs-sidebar" role="navigation" aria-label="Documentation navigation">
    {% include 'partials/docs-nav.html' %}
  </aside>

  {# Main Content #}
  <div class="docs-main">
    {# Version Banner #}
    {% include 'partials/version-banner.html' %}

    {# Stale Content Banner #}
    {% include 'partials/stale-content-banner.html' %}

    {# Page Hero: Breadcrumbs + Title + Metadata (doc-style, no action-bar) #}
    <div class="page-hero page-hero--editorial">
      <div class="page-hero__top">
        {{ _breadcrumb_eyebrow(page) }}
        <div class="page-hero__actions">
          {# Notebook-specific: Download, Binder, Colab #}
          <div class="page-hero__notebook-actions">
            {{ notebook_action(download_url, 'Download .ipynb', 'download') }}
            {{ notebook_action(binder_url, 'Run in Binder', 'external') }}
            {{ notebook_action(colab_url, 'Open in Colab', 'external') }}
          </div>
          {{ _share_dropdown(page) }}
        </div>
      </div>

      <h1 class="page-hero__title">{{ page_title }}</h1>

      {% with params?.description as desc %}
      {% if desc %}<p class="page-hero__description">{{ desc }}</p>{% end %}
      {% end %}

      {# Metadata: kernel, cells, reading time, word count, date #}
      {% let has_meta = kernel_name or cell_count or page?.word_count or page?.date or params?.lastmod %}
      {% if has_meta %}
      <div class="page-hero__meta">
        {% if kernel_name %}
        <span class="page-hero__meta-item">
          {{ icon('code', size=16) }}
          <span>{{ kernel_name }}</span>
        </span>
        {% end %}
        {% if cell_count %}
        <span class="page-hero__meta-item">
          {{ icon('layers', size=16) }}
          <span>{{ cell_count }} {{ 'cell' if cell_count == 1 else 'cells' }}</span>
        </span>
        {% end %}
        {% if page?.word_count %}
        <span class="page-hero__meta-item">
          {{ icon('file-text', size=16) }}
          <span>{{ t('meta.word_count', {'count': page.word_count}, default='{count} words') }}</span>
        </span>
        {% end %}
        {% with params?.lastmod ?? page?.date as display_date %}
        {% if display_date %}
        <span class="page-hero__meta-item">
          {{ icon('arrow-clockwise', size=16) }}
          <span>{{ display_date |> time_ago }}</span>
        </span>
        {% end %}
        {% end %}
      </div>
      {% end %}
    </div>

    {# Article Content #}
    <article class="prose {{ css_class }}">
      <div class="docs-content notebook-content">
        {{ content | safe }}
      </div>

      {% if page_tags | length > 0 %}
      <footer class="docs-footer">
        <span class="docs-footer-label">{{ t('docs.tagged', default='Tagged') }}</span>
        {{ tag_list(page_tags) }}
      </footer>
      {% end %}
    </article>

    {# Page navigation (prev/next) #}
    {{ page_navigation(page) }}
  </div>

  {# Right Sidebar: Contextual Graph + TOC (empty aside when no toc → CSS collapses) #}
  <aside class="docs-toc" role="complementary" aria-label="Table of contents">
    {% if toc_items %}
    {% set show_graph = theme.features is not defined or 'graph.contextual' in theme.features %}
    {% if show_graph %}
    <div class="graph-contextual" data-page-url="{{ page_href }}">
      <div class="graph-contextual-container graph-loading"></div>
    </div>
    {% end %}

    {{ toc(toc_items=toc_items, toc=toc, page=page) }}
    {% end %}
  </aside>
</div>

{# Mobile sidebar toggle button #}
{% spaceless %}
<button class="docs-sidebar-toggle" aria-label="Toggle navigation sidebar" aria-expanded="false"
  aria-controls="docs-sidebar">
  {{ icon('list', size=20) }}
</button>
{% end %}

{# Sidebar overlay for mobile #}
<div class="docs-sidebar-overlay" aria-hidden="true"></div>
{% end %}