{# Pieces shared by every wiki template. Import with: {% import "macros.html" as ui %} #}

{# Attributes of a link that opens a page inside the content panel (htmx) and updates the URL. #}
{% macro nav_url(url) -%}
href="{{ url }}" hx-get="{{ url }}" hx-target="#content" hx-push-url="true"
{%- endmacro %}

{# The same, for the wiki page of an entity. #}
{% macro nav(path) -%}
{{ nav_url("/wiki/" ~ path) }}
{%- endmacro %}

{# Icon of an entity role: folder/file emoji for packages and modules, colored symbol for the rest. #}
{% macro icon(role, symbol="") -%}
<span class="icon icon-{{ role | replace(' ', '-') }}">{{ symbol }}</span>
{%- endmacro %}

{# Header of a graph view page. #}
{% macro view_header(view, title, text) -%}
<header class="page-header">
  <h1>{{ icon(view) }}<span class="name">{{ title }}</span></h1>
  <p class="meta">{{ text }}</p>
</header>
{%- endmacro %}

{# Drawing area of a graph view, with its bar on top (highlight, zoom, fit); static/graph.js draws
   data_url with the style of `view` and selects `focus` (an entity path) when given. #}
{% macro view_canvas(view, data_url, focus="") -%}
<div class="graph-area">
  {# Bar on top of the drawing: highlight, zoom and fit. #}
  <div class="graph-canvas-bar">
    <input class="graph-find" type="search" placeholder="Highlight…" autocomplete="off">
    <span class="graph-zoom" hidden>
      <button type="button" class="graph-zoom-out" title="Zoom out">−</button>
      <span class="graph-zoom-level" title="Zoom">100%</span>
      <button type="button" class="graph-zoom-in" title="Zoom in">+</button>
      <button type="button" class="graph-zoom-reset" title="Real size">100%</button>
    </span>
    <button type="button" class="graph-fit" title="Fit the graph to the screen">Fit</button>
  </div>
  <div class="graph-canvas" data-view="{{ view }}" data-url="{{ data_url }}" data-focus="{{ focus }}">
    <p class="empty">Loading…</p>
  </div>
  <aside class="graph-info" hidden></aside>
  <div class="graph-tooltip" role="tooltip" hidden></div>
</div>
{%- endmacro %}

{# Collapsible section: a badge sitting on the top border; clicking the badge folds the section.
   kind: color of the section (an entity role or a docstring section kind).
   name: identifies the section (data-section); defaults to kind.
   divider: only the top line (entity pages) instead of a box (module pages).
   attrs: extra attributes of the <details> element (e.g. htmx loading). #}
{% macro section(kind, label, count=none, name=none, divider=false, open=true, attrs="") -%}
{%- set kind = kind | replace(' ', '-') -%}
<details class="block{% if divider %} divider{% endif %} block-{{ kind }}" data-section="{{ name or kind }}"{% if open %} open{% endif %} {{ attrs | safe }}>
  <summary class="badge badge-{{ kind }}">{{ label }}{% if count is not none %} <span class="count">{{ count }}</span>{% endif %}</summary>
  {{ caller() }}
</details>
{%- endmacro %}