{% extends "base.html" %}
{% block title %}Index — Solidity Flow Navigator{% endblock %}
{% block body_class %}index-page{% endblock %}

{% block content %}
{# v0.15.0 bookmarks (spec §8.3): a ribbon toggle. Each is a real server-side link
   to /bookmark/<kind>/<id> (works with no JavaScript — the fallback reloads and
   returns to this row). index.js progressively enhances the click to toggle in
   place without a reload, so the auditor stays exactly where they are. ``on``
   picks filled (terracotta) vs outline. #}
{% macro bookmark_toggle(kind, ident, on) -%}
{% set anchor = ('e-' if kind == 'entry' else 'c-') ~ (ident | anchor_slug) -%}
<a class="bookmark-toggle{{ ' is-on' if on }}" href="{{ url_for('toggle_bookmark', kind=kind, ident=ident, next=request.path + '#' + anchor) }}" aria-pressed="{{ 'true' if on else 'false' }}" title="{{ 'Remove bookmark' if on else 'Bookmark' }}" aria-label="{{ 'Remove bookmark' if on else 'Bookmark' }}"><svg class="bookmark-ico" viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path d="M4 2 L12 2 L12 14 L8 10.5 L4 14 Z" stroke-width="1.4" stroke-linejoin="round"/></svg></a>
{%- endmacro %}
<header class="index-header">
  <div class="index-header-row">
    <h1 class="index-title">Index</h1>
    {# v0.10.4: native title tooltips on the stats and per-entry badges —
       the d{N} / "N unr" shorthand was unexplained anywhere in the UI. #}
    {# v0.11.0: labels pluralize with their counts; the repo-path subtitle
       that duplicated the site header's path is gone (spec §8.3). #}
    <ul class="index-counts">
      <li class="count-item" title="contracts with at least one externally callable entry point">
        <span class="count-value">{{ total_contracts }}</span>
        <span class="count-label">contract{{ 's' if total_contracts != 1 }}</span>
      </li>
      <li class="count-item" title="externally callable functions — one Flow page each">
        <span class="count-value">{{ total_entry_points }}</span>
        <span class="count-label">entry point{{ 's' if total_entry_points != 1 }}</span>
      </li>
      <li class="count-item" title="call sites no Flow could resolve to a function body (low-level calls, unbound interface calls)">
        <span class="count-value">{{ total_unresolved }}</span>
        <span class="count-label">unresolved</span>
      </li>
    </ul>
  </div>
</header>

{# v0.16.0 (spec §8.3): filter box. Server-rendered but `hidden` so no-JS users
   never see a dead control; index.js reveals it on load and narrows the listing
   below as the auditor types. The complete listing is always present server-side,
   and the Bookmarked section above stays pinned (unfiltered). #}
<div class="index-filter" hidden>
  <input class="index-filter-input" id="entry-filter" type="text" autocomplete="off" spellcheck="false" placeholder="Filter entry points…" aria-label="Filter entry points by signature or contract name">
  <button class="index-filter-clear" id="entry-filter-clear" type="button" aria-label="Clear filter" title="Clear filter">&times;</button>
  <span class="index-filter-count" id="entry-filter-count" aria-live="polite"></span>
</div>

<p class="index-scope">
  <span class="scope-chrome">Scope</span>
  <span class="scope-chrome">·</span>
  <span class="scope-chrome">excluded</span>
  {% for glob in scope.exclude_paths -%}
    <code class="scope-glob">{{ glob }}</code>{% if not loop.last %}<span class="scope-chrome">,</span>{% endif %}
  {% endfor %}
  <span class="scope-chrome">·</span>
  <span class="scope-chrome">stub</span>
  {%- if scope.stub_paths %}
    {% for glob in scope.stub_paths -%}
      <code class="scope-glob">{{ glob }}</code>{% if not loop.last %}<span class="scope-chrome">,</span>{% endif %}
    {% endfor %}
  {%- else %}
    <span class="scope-none">none</span>
  {%- endif %}
</p>

{# v0.12.0 (spec §8.3): chips legend — each key renders through the SAME
   classes as the live chips so the legend stays self-verifying. Renders
   unconditionally to keep page layout stable across targets. #}
<p class="index-legend">
  <span class="scope-chrome">Legend</span>
  <span class="scope-chrome">·</span>
  <span class="badge badge-modifier entry-mod-chip">modifier</span>
  <span class="scope-chrome">gate on a mutating entry, none = unguarded</span>
  <span class="scope-chrome">·</span>
  <span class="meta-unresolved">2 unr</span>
  <span class="scope-chrome">unresolved call sites</span>
  <span class="scope-chrome">·</span>
  <span class="meta-depth">d3</span>
  <span class="scope-chrome">max call depth</span>
</p>

{# v0.18.0 (spec §8.3, §13.2): Bindings panel. One row per bindable interface;
   each row is a real GET form to /bind/<iface> with a "Set" submit, so picking a
   concrete contract resolves that interface at every call site across every Flow
   — and works with no JavaScript. "Save to solflow.toml" (POST /bindings/save)
   persists the current bindings so they survive a restart (the one place solflow
   writes to the working directory). index.js collapses a long list behind a
   "Show all" toggle and auto-applies on change (hiding the per-row "Set"); with
   JS off the full list and all controls render server-side. Renders only when at
   least one interface is bindable. #}
{% if bindable %}
<section class="index-bindings" id="bindings" aria-label="Interface bindings">
  <div class="index-bindings-head">
    <h2 class="group-heading">Bindings</h2>
    <form class="bindings-save" method="post" action="{{ url_for('save_bindings') }}">
      <button class="bindings-save-btn" type="submit" title="Write the current bindings to solflow.toml so they persist the next time you run solflow here">Save bindings</button>
    </form>
  </div>
  {% if saved == 'ok' %}
  <p class="bindings-result is-ok" role="status">Saved to solflow.toml.</p>
  {% elif saved == 'error' %}
  <p class="bindings-result is-error" role="status">Could not write solflow.toml — see the server log.</p>
  {% endif %}
  <p class="bindings-hint">Resolve an interface to a concrete contract across all Flows &middot; Save to persist across sessions.</p>
  <ul class="bindings-list" id="bindings-list">
    {% for b in bindable %}
    <li class="bindings-row{{ ' is-bound' if b.bound_to }}" data-bind-row>
      <span class="bindings-iface"><code class="src">{{ b.interface }}</code></span>
      <form class="bindings-form" method="get" action="{{ url_for('set_binding', iface=b.interface) }}">
        <input type="hidden" name="next" value="/#bindings">
        <span class="bindings-arrow" aria-hidden="true">&rarr;</span>
        <select class="node-bind-select bindings-select" name="contract" aria-label="Concrete contract for {{ b.interface }}">
          <option value="__none__"{% if not b.bound_to %} selected{% endif %}>&mdash; unbound &mdash;</option>
          {% for c in b.candidates %}
          <option value="{{ c }}"{% if b.bound_to == c %} selected{% endif %}>{{ c }}</option>
          {% endfor %}
          {%- if b.bound_to and b.bound_to not in b.candidates %}
          {# A binding to a contract not among detected candidates (set via --bind,
             or now out of scope). Keep it selectable so it shows and can be cleared. #}
          <option value="{{ b.bound_to }}" selected>{{ b.bound_to }}</option>
          {%- endif %}
        </select>
        <button class="bindings-set" type="submit">Set</button>
      </form>
      <span class="bindings-meta">{{ b.call_sites }} call site{{ 's' if b.call_sites != 1 }}</span>
    </li>
    {% endfor %}
  </ul>
</section>
{% endif %}

{# v0.15.0 (spec §8.3): the Bookmarked section renders only when the cookie holds
   ids matching this analysis. Contracts link to their block anchor; entries link
   to their Flow page. Each carries the same toggle (already "on") to un-bookmark.
   A fixed shortcut (.bookmark-jump, below) anchors here from anywhere on the page. #}
{% set bookmark_count = (bookmarked_contracts | length) + (bookmarked_entries | length) %}
{% if bookmark_count %}
{# Persistent shortcut: a fixed anchor, visible at any scroll position, that jumps
   to the Bookmarked section. Server-rendered count; plain <a>, no JavaScript. #}
<a class="bookmark-jump" href="#bookmarked" title="Jump to bookmarks" aria-label="Jump to {{ bookmark_count }} bookmark{{ 's' if bookmark_count != 1 }}">
  <svg class="bookmark-ico" viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path d="M4 2 L12 2 L12 14 L8 10.5 L4 14 Z" stroke-width="1.4" stroke-linejoin="round"/></svg>
  <span class="bookmark-jump-count">{{ bookmark_count }}</span>
</a>
<section class="index-bookmarked" id="bookmarked" aria-label="Bookmarked">
  <h2 class="group-heading">Bookmarked</h2>
  <ul class="bookmark-list">
    {% for contract in bookmarked_contracts %}
    <li class="bookmark-item">
      {{ bookmark_toggle('contract', contract.name, true) }}
      <a class="bookmark-link" href="#c-{{ contract.name | anchor_slug }}">
        <span class="bookmark-kind">contract</span>
        <code class="src">{{ contract.name }}</code>
      </a>
    </li>
    {% endfor %}
    {% for ep in bookmarked_entries %}
    <li class="bookmark-item">
      {{ bookmark_toggle('entry', ep.url_id, true) }}
      <a class="bookmark-link" href="{{ url_for('flow_page', url_id=ep.url_id) }}">
        <span class="bookmark-contract">{{ ep.contract_name }}</span>
        <code class="src">{{ ep.signature_html | safe }}</code>
      </a>
    </li>
    {% endfor %}
  </ul>
</section>
{% endif %}

{% for group in groups %}
  {% if group.contracts %}
  <section class="index-group">
    <h2 class="group-heading">{{ group.label }}</h2>
    {% for contract in group.contracts %}
    <article class="contract-block" id="c-{{ contract.name | anchor_slug }}" data-name="{{ contract.name }}">
      <h3 class="contract-name">
        {{ bookmark_toggle('contract', contract.name, ('c:' + contract.name) in bookmarked_ids) }}
        {{ contract.name }}
        <span class="contract-path">{{ contract.source_path }}</span>
      </h3>
      {% if contract.mutating_entry_points %}
      <section class="entry-section">
        <h4 class="section-heading">Mutating · {{ contract.mutating_count }}</h4>
        <ul class="entry-list">
          {% for ep in contract.mutating_entry_points %}
          <li class="entry-row{{ ' viewed' if ep.url_id in viewed_ids }}" id="e-{{ ep.url_id | anchor_slug }}">
            {# v0.11.0 (spec §8.3): no Contract. prefix — the block heading
               names the contract; modifier chips render on mutating rows
               only (no chips = unprotected mutating entry point). #}
            <span class="entry-main">
              {{ bookmark_toggle('entry', ep.url_id, ('e:' + ep.url_id) in bookmarked_ids) }}
              <a class="entry-link" href="{{ url_for('flow_page', url_id=ep.url_id) }}">
                <code class="src">{{ ep.signature_html | safe }}</code>
              </a>
              {%- for m in ep.modifier_names %}
              <span class="badge badge-modifier entry-mod-chip" title="modifier {{ m }} guards this entry point">{{ m }}</span>
              {%- endfor %}
            </span>
            <span class="entry-meta">
              {%- if ep.unresolved_count > 0 -%}
                <span class="meta-unresolved" title="{{ ep.unresolved_count }} unresolved call site(s) in this flow — rendered as red pills">{{ ep.unresolved_count }} unr</span>
                <span class="meta-sep">·</span>
              {%- endif -%}
              <span class="meta-depth" title="max call depth {{ ep.max_depth }}">d{{ ep.max_depth }}</span>
            </span>
          </li>
          {% endfor %}
        </ul>
      </section>
      {% endif %}
      {% if contract.read_only_entry_points %}
      <section class="entry-section">
        <h4 class="section-heading">Read-only · {{ contract.read_only_count }}</h4>
        <ul class="entry-list">
          {% for ep in contract.read_only_entry_points %}
          <li class="entry-row{{ ' viewed' if ep.url_id in viewed_ids }}" id="e-{{ ep.url_id | anchor_slug }}">
            {# v0.11.0: read-only rows carry no modifier chips (deliberate
               asymmetry, spec §8.3) but share the entry-main wrapper. #}
            <span class="entry-main">
              {{ bookmark_toggle('entry', ep.url_id, ('e:' + ep.url_id) in bookmarked_ids) }}
              <a class="entry-link" href="{{ url_for('flow_page', url_id=ep.url_id) }}">
                <code class="src">{{ ep.signature_html | safe }}</code>
              </a>
            </span>
            <span class="entry-meta">
              {%- if ep.unresolved_count > 0 -%}
                <span class="meta-unresolved" title="{{ ep.unresolved_count }} unresolved call site(s) in this flow — rendered as red pills">{{ ep.unresolved_count }} unr</span>
                <span class="meta-sep">·</span>
              {%- endif -%}
              <span class="meta-depth" title="max call depth {{ ep.max_depth }}">d{{ ep.max_depth }}</span>
            </span>
          </li>
          {% endfor %}
        </ul>
      </section>
      {% endif %}
    </article>
    {% endfor %}
  </section>
  {% endif %}
{% endfor %}

<p class="privacy-footer">All analysis local · code never uploaded · server bound to 127.0.0.1 · <a class="source-link" href="https://github.com/norah1499/solidity-flow-navigator">source</a></p>
{% endblock %}

{# v0.15.0: progressive enhancement — bookmark toggles work as plain links above;
   this script intercepts them to toggle in place (no reload), so the auditor's
   scroll position is preserved (spec §8.3). #}
{% block scripts %}
  <script src="{{ url_for('static', filename='js/index.js') }}" defer></script>
{% endblock %}