{% extends "base.html" %}
{% from "_macros.html" import icon %}
{% block title %}{{ fname }}{% endblock %}
{% block bodyclass %}fullscreen-app{% endblock %}
{% block body %}
<div class="vd" data-vi-diff data-old="{{ old_sha or '' }}" data-new="{{ new_sha or '' }}" data-fname="{{ fname }}"
     data-old-label="{{ old_label }}" data-new-label="{{ new_label }}">
  <aside class="vd-side">
    <div class="head">
      <div class="small row"><a href="{{ back_url }}" class="grow">← {{ back_label }}</a>
        <button type="button" class="head-tg" data-head-toggle title="{{ _("Hide or show the file details") }}"><span class="when-open">▴ {{ _("Hide") }}</span><span class="when-closed">▾ {{ _("Details") }}</span></button></div>
      <div class="fname" style="margin-top:6px">{{ icon("vi") }} {{ fname }}</div>
      <div class="vd-paths small">
        <div><span class="slot-tag a sm">A</span> {% if a %}<a href="#" data-reveal="{{ a }}" title="{{ _("Show in Explorer") }}">{{ a }}</a>{% else %}<span class="faint">{{ _("— not present") }}</span>{% endif %}</div>
        <div><span class="slot-tag b sm">B</span> {% if b %}<a href="#" data-reveal="{{ b }}" title="{{ _("Show in Explorer") }}">{{ b }}</a>{% else %}<span class="faint">{{ _("— not present") }}</span>{% endif %}</div>
      </div>
      <div class="vd-icons"></div>
    </div>
    <div class="vd-tabs">
      <button class="on" data-tab="bd" title="{{ _("Block diagram") }}">{{ _("Diagram") }} <span class="n">…</span></button>
      <button data-tab="fp" title="{{ _("Front panel controls") }}">{{ _("Panel") }} <span class="n">…</span></button>
      <button data-tab="deps" title="{{ _("SubVI, typedef and library dependencies") }}">{{ _("Dependencies") }} <span class="n">…</span></button>
      <button data-tab="props" title="{{ _("VI properties") }}">{{ _("Properties") }} <span class="n">…</span></button>
    </div>
    <div class="vd-filter"></div>
    <div class="vd-list"></div>
    <div class="small faint" style="padding:8px 14px;border-top:1px solid var(--border)">{{ _("Use <b>j</b>/<b>k</b> or ↑/↓ to move through the list · clicking an item pans both diagrams to that spot")|safe }}</div>
  </aside>
  <section class="vd-main">
    <div class="vd-toolbar">
      <span class="btn-group">
        <button class="btn sm on" data-mode="split">{{ _("Side by side") }}</button>
        <button class="btn sm" data-mode="old">A</button>
        <button class="btn sm" data-mode="new">B</button>
      </span>
      <label class="tg"><input type="checkbox" data-opt="dim" checked> {{ _("Dim unchanged") }}</label>
      <label class="tg"><input type="checkbox" data-opt="moved"> {{ _("Show moved") }}</label>
      <label class="tg" title="{{ _("Show Stacked Sequence frames side by side like a Flat Sequence") }}"><input type="checkbox" data-opt="flat" checked> {{ _("Stacked → Flat") }}</label>
      <label class="tg"><input type="checkbox" data-opt="sync" checked> {{ _("Sync scroll") }}</label>
      <label class="tg"><input type="checkbox" data-opt="names"> {{ _("SubVI labels") }}</label>
      <span class="grow"></span>
      <a class="btn sm" href="{{ url_for('vidiff_view', a=b, b=a, ra=rb, rb=ra, back=request.args.get('back')) }}" title="{{ _("Swap A and B") }}">{{ _("⇄ Swap") }}</a>
      <button class="btn sm" type="button" data-svg-copy title="{{ _("Save the SVG exactly as it is drawn in the panes now (current zoom and frames)") }}">{{ _("⬇ Save view as SVG") }}</button>
      <a class="btn sm" href="{{ url_for('export_svg', a=a, b=b, pdf=1) }}" title="{{ _("A PDF with the list of changes, the whole A and B diagram and readable detail views of the changes") }}">{{ _("📄 PDF") }}</a>
      <a class="btn sm primary" href="{{ url_for('export_svg', a=a, b=b) }}" title="{{ _("Draw the A and B block diagrams into one SVG file per view, with numbered change markers") }}">{{ _("🖼 Export SVG") }}</a>
    </div>
    <div class="vd-legendbar">
      <span class="legend">
        <span><i style="border-color:#1a7f37;background:rgba(26,127,55,.13)"></i>{{ _("added") }}</span>
        <span><i style="border-color:#cf222e;background:rgba(207,34,46,.12)"></i>{{ _("removed") }}</span>
        <span><i style="border-color:#d97706;background:rgba(217,119,6,.14)"></i>{{ _("modified") }}</span>
        <span><i style="border-color:#8250df;background:rgba(130,80,223,.10)"></i>{{ _("other frame") }}</span>
        <span><i style="border-color:#2f6feb;border-style:dashed"></i>{{ _("moved") }}</span>
      </span>
    </div>
    <div class="panes" style="position:relative">
      <div class="pane old"></div>
      <div class="pane new"></div>
      <div class="loading-overlay"><span class="spinner"></span><span>{{ _("Parsing and comparing the VIs with pylabview…") }}</span><span class="small faint">{{ _("The first time may take a few seconds; the result is cached.") }}</span></div>
    </div>
  </section>
</div>
<script src="{{ url_for('static', filename='diagram.js') }}"></script>
<script src="{{ url_for('static', filename='vidiff.js') }}"></script>
{% endblock %}