{% extends "base.html" %}
{% block title %}{{ flow.entry_point_contract_name }}.{{ flow.entry_point_function_name }}{{ flow.signature_suffix }} — Solidity Flow Navigator{% endblock %}
{% block body_class %}flow-page{% endblock %}

{% block head_extra %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/pygments.css') }}">
{% endblock %}

{% block content %}
{# v0.10.4: the back-link lives INSIDE the header's flex row. It was
   previously a position:fixed overlay at the header's coordinates, which
   sat on top of the title's first characters on every flow page. #}
<header class="flow-header">
  <nav class="flow-nav">
    <a class="back-link" href="{{ url_for('index') }}">&larr; Overview</a>
    {# v0.15.0 bookmarks (spec §8.3): toggle the entry this page shows. Server-side
       link + inline SVG, no JavaScript; redirects back to this page. The macro
       lives in index.html, so the markup is inlined here. #}
    {% set bookmarked = ('e:' + entry_url_id) in bookmarked_ids %}
    <a class="bookmark-toggle{{ ' is-on' if bookmarked }}" href="{{ url_for('toggle_bookmark', kind='entry', ident=entry_url_id, next=request.path) }}" aria-pressed="{{ 'true' if bookmarked else 'false' }}" title="{{ 'Unpin' if bookmarked else 'Pin this entry point' }}" aria-label="{{ 'Unpin' if bookmarked else 'Pin this entry point' }}"><svg class="bookmark-ico" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><g transform="rotate(25 12 12)"><path d="M16 12V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v8c0 1.1-.9 2-2 2v2h5.2v6l.8.8.8-.8v-6H18v-2c-1.1 0-2-.9-2-2z"/></g></svg></a>
  </nav>
  <div class="flow-header-text">
    <h1 class="flow-title">
      <code>{{ flow.entry_point_contract_name }}.{{ flow.entry_point_function_name }}{{ flow.signature_suffix }}</code>
    </h1>
    {% set root = flow.root %}
    {% if root.invoked_via_contract_name != root.declarer_contract_name %}
      <p class="flow-subtitle">
        Inherited entry point — invoked on
        <code>{{ root.invoked_via_contract_name }}</code>,
        declared in <code>{{ root.declarer_contract_name }}</code>.
      </p>
    {% endif %}
  </div>
  {# v0.16.0 (spec §10.2): whole-tree controls + the Reset-view fit control,
     grouped at the right of the header (below the theme toggle). Buttons, not
     links — they drive the JS-rendered graph and have no no-JS fallback (neither
     does the graph). flow-progressive.js wires Expand/Collapse (and the e / c
     keys) and Reset view (#reset-view, the R / 0 keys). #}
  <div class="flow-controls">
    <button class="flow-control" id="expand-all-btn" type="button" title="Expand the whole call tree (shortcut: e)">Expand all</button>
    <button class="flow-control" id="collapse-all-btn" type="button" title="Collapse back to the root (shortcut: c)">Collapse all</button>
    <button class="flow-control" id="reset-view" type="button" title="Fit the whole tree in view (shortcut: R or 0)">Reset view</button>
    {# v0.22.0: fullscreen is a view action, so it joins the toolbar group. It
       hides all chrome (headers + sidebar, keeping the minimap); since this
       button lives in the header it is hidden while fullscreen, so #fullscreen-
       restore (a floating control) exits. Handler wired by flow-progressive.js. #}
    <button class="flow-control flow-control--icon" id="maximize-toggle" type="button" aria-pressed="false" title="Fullscreen graph" aria-label="Fullscreen graph"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 4H4v5 M15 4h5v5 M9 20H4v-5 M15 20h5v-5"/></svg></button>
  </div>
</header>

{# Stage 3 graph layout. Flow data is embedded inline; flow.js builds the
   dagre graph, measures rendered HTML nodes, lays out, and binds d3-zoom.
   The ``data-expand-all`` attribute is the v0.10.0 toggle (spec §10.2): the
   progressive renderer reads it on init and, when "true", expands every
   call site recursively before the first layout pass. #}
<script type="application/json" id="flow-data" data-expand-all="{{ 'true' if expand_all else 'false' }}" data-flow-id="{{ entry_url_id }}">{{ flow_json | safe }}</script>

{# v0.22.0: a flex row holding the collapsible call-tree sidebar beside the
   graph frame. The min-width:0 escape hatch is carried on both so dagre's fit
   still measures the real (sidebar-narrowed) frame width (spec §10.2). #}
<div class="flow-body">
  {# v0.22.0: contextual floating controls (top-left), hidden until needed.
     #calltree-reopen shows the sidebar when it is collapsed; #fullscreen-restore
     exits fullscreen (the header — and its fullscreen button — are hidden then).
     Wired by flow-progressive.js. #}
  <div class="flow-float-tools">
    <button class="float-tool" id="calltree-reopen" type="button" hidden title="Show the call-tree sidebar (shortcut: t)" aria-label="Show call-tree sidebar"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="9" y1="4" x2="9" y2="20"/></svg></button>
  </div>
  {# Exit-fullscreen control, top-right (more intuitive than top-left), shown
     only while maximized — the toolbar's fullscreen button is hidden then. #}
  <button class="float-tool float-tool--right" id="fullscreen-restore" type="button" hidden title="Exit fullscreen (Esc)" aria-label="Exit fullscreen"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9h5V4 M20 9h-5V4 M4 15h5v5 M20 15h-5v5"/></svg></button>
  {# Flow call-tree sidebar (spec §10.2). Open by default (with JS off it stays
     open). flow-progressive.js populates #calltree-list from the opened nodes;
     the handle to its right drags the sidebar width. #}
  <aside id="call-tree" class="flow-sidebar" aria-label="Call tree">
    {# Panel header — a quiet section label (matching the index OVERVIEW /
       CONTRACTS labels), not a button, plus a collapse toggle. #}
    <div class="calltree-titlebar">
      <span class="calltree-title"><svg class="calltree-title-ico" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 6h10M4 12h16M4 18h7"/></svg>Call Tree</span>
      <button class="calltree-collapse" id="calltree-collapse" type="button" title="Collapse sidebar (shortcut: t)" aria-label="Collapse sidebar"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="9" y1="4" x2="9" y2="20"/></svg></button>
    </div>
    <div class="calltree-head">
      <div class="calltree-search">
        <svg class="calltree-search-ico" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input id="calltree-filter" class="calltree-filter-input" type="text" autocomplete="off" spellcheck="false" placeholder="Filter nodes…" aria-label="Filter the call tree by name, contract, or signature">
        <button id="calltree-filter-clear" class="calltree-filter-clear" type="button" aria-label="Clear filter" title="Clear filter">&times;</button>
      </div>
      <span id="calltree-filter-count" class="calltree-filter-count" aria-live="polite"></span>
    </div>
    <nav id="calltree-list" class="calltree-list" aria-label="Opened nodes"></nav>
  </aside>
  <div class="flow-sidebar-resize" id="calltree-resize" aria-hidden="true"></div>

  <div id="graph-frame" tabindex="0">
  <div id="graph">
    <svg id="edges" aria-hidden="true">
      <defs>
        <marker id="arrowhead" viewBox="0 0 10 10" refX="9" refY="5"
                markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 0 L 10 5 L 0 10 z"></path>
        </marker>
      </defs>
    </svg>
    <div id="nodes"></div>
  </div>
  {# v0.21.0 (spec §10.2 "Flow minimap"): collapsible overview overlay. A
     sibling of #graph (NOT inside it) so the d3-zoom transform applied to
     #graph never touches it; #graph-frame is position:relative + overflow
     :hidden, so this floats over the graph clipped to the frame. The canvas
     draws node rectangles (redrawn by flow-progressive.js on every relayout);
     the viewport div marks the current view and is the click/drag target that
     relocates it. JavaScript-rendered, no no-JS fallback — neither has the
     graph. #}
  <div id="minimap" class="minimap" aria-label="Mini Map">
    <button id="minimap-toggle" class="minimap-toggle" type="button" aria-expanded="true" title="Hide Mini Map (shortcut: m)" aria-label="Toggle Mini Map">
      <span class="fold-chevron"><svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
      <span class="minimap-label">Mini Map</span>
    </button>
    <div class="minimap-body" title="Click or drag to aim — dives into that part of the flow">
      <canvas id="minimap-canvas"></canvas>
      {# Two non-interactive indicators (the body handles all pointer input):
         #minimap-extent is a really-faint outline of the true visible region;
         #minimap-reticle is the fixed-size aim box marking the view centre. #}
      <div id="minimap-extent" class="minimap-extent" aria-hidden="true"></div>
      <div id="minimap-reticle" class="minimap-reticle" aria-hidden="true"></div>
    </div>
  </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
  <script src="{{ url_for('static', filename='vendor/dagre.min.js') }}"></script>
  <script src="{{ url_for('static', filename='vendor/d3.min.js') }}"></script>
  {# v0.10.0 Stage 2: the all-at-once renderer (flow.js) and the
     `--legacy` flag that selected it are retired. The bird's-eye-view
     use case is now `--expand-all` on this same renderer (spec §10.2). #}
  <script src="{{ url_for('static', filename='js/flow-progressive.js') }}"></script>
{% endblock %}