{% extends "base.html" %}
{% from "_recon_table.html" import render_table, drill_table %}
{% block title %}Reconciliation — RWA Calculator{% endblock %}

{% block content %}
<h1>Parallel-run reconciliation</h1>
<p class="muted">Run this calculator and reconcile its output against your legacy
calculator, component by component (EAD, RWA, risk weight, PD, LGD, CCF, exposure
class, …). Each row is bucketed as match / within-tolerance / break / missing, with
our reason and input drivers attached so a break can be triaged to a data fix or an
engine fix.</p>

{% if error %}<div class="callout error">Reconciliation failed: {{ error }}</div>{% endif %}

<form class="form" method="post" action="/reconciliation">
  <div class="field">
    <label for="data_path">Our data path</label>
    <input id="data_path" name="data_path" value="{{ default_path }}" placeholder="/path/to/data" required>
  </div>
  <div class="field-row">
    <div class="field">
      <label for="framework">Framework</label>
      <select id="framework" name="framework">
        {% for fw in frameworks %}<option value="{{ fw.id }}"{% if fw.id == selected_framework %} selected{% endif %}>{{ fw.name }}</option>{% endfor %}
      </select>
    </div>
    <div class="field">
      <label for="permission_mode">Permission mode</label>
      <select id="permission_mode" name="permission_mode">
        <option value="standardised"{% if selected_permission == "standardised" %} selected{% endif %}>Standardised (all SA)</option>
        <option value="irb"{% if selected_permission == "irb" %} selected{% endif %}>IRB (model permissions)</option>
      </select>
    </div>
    <div class="field">
      <label for="data_format">Data format</label>
      <select id="data_format" name="data_format">
        <option value="parquet"{% if selected_format == "parquet" %} selected{% endif %}>parquet</option>
        <option value="csv"{% if selected_format == "csv" %} selected{% endif %}>csv</option>
      </select>
    </div>
    <div class="field">
      <label for="reporting_date">Reporting date</label>
      <input id="reporting_date" name="reporting_date" type="date" value="{{ default_date }}" required>
    </div>
  </div>
  <div class="field">
    <label for="mapping_toml">Legacy mapping (TOML)</label>
    <textarea id="mapping_toml" name="mapping_toml" class="mono" rows="16" spellcheck="false">{{ mapping_toml }}</textarea>
    <p class="muted">Declare the join key(s) and which legacy column maps to each canonical
    component. <code>legacy_file</code> resolves relative to the data path above; numeric
    components accept <code>scale</code> and <code>unit = "percent"</code>, categoricals a
    <code>value_map</code> of synonyms.</p>
  </div>
  <div class="form-actions">
    <button class="btn btn-primary" type="submit">Run reconciliation</button>
    {% if has_saved_run %}<a class="btn btn-ghost" href="/reconciliation/reset">Reset to defaults</a>{% endif %}
  </div>
</form>

{% if result %}
{% if result.warnings %}
<div class="callout warn">{% for w in result.warnings %}<div>{{ w }}</div>{% endfor %}</div>
{% endif %}

{% if not result.success %}
<div class="callout info">No comparable components — check the mapping (legacy file path,
join keys and column names).</div>
{% else %}

<h2>1 · Headline — does it tie out?</h2>
<div class="stat-row">
  {% for s in result.headline %}
  <div class="stat">
    <div class="stat-num">{{ "{:,.0f}".format(s.our_total) }}</div>
    <div class="stat-lbl">{{ s.component }} — ours</div>
    <div class="muted">legacy {{ "{:,.0f}".format(s.legacy_total) }}{% if s.delta_pct is not none %} · Δ {{ "%+.2f"|format(s.delta_pct) }}%{% endif %}</div>
  </div>
  {% endfor %}
</div>
<div class="panel">
  <h3>Tie-out — legacy vs ours per component</h3>
  {{ result.chart_tie_out | safe }}
</div>
<div class="panel">
  <h3>Where the money differs — Σ|Δ| by component</h3>
  {{ result.chart_abs_delta | safe }}
</div>
<h3>By component</h3>
{{ render_table(result.component_table) }}

<h2>2 · Segment — where do breaks concentrate?</h2>
<p class="muted">Each row links into the per-key explorer, pre-filtered to that segment.</p>
{% if result.allocation_table.rows %}
<div class="panel">
  <h3>Asset-class allocation — legacy vs ours (RWA)</h3>
  {{ result.chart_allocation | safe }}
</div>
<h3>Asset-class allocation — EAD &amp; RWA by risk class</h3>
<p class="muted">Each side's exposures are totalled by risk class (a split exposure's
portions each counted in their own class). Offsetting deltas show where the two engines
allocate an exposure to different classes.</p>
{{ render_table(result.allocation_table) }}
{% endif %}
<h3>By bucket</h3>
{{ drill_table(result.bucket_table, "row_bucket", result.explorer_url, "bucket") }}
<h3>By exposure class</h3>
{{ drill_table(result.class_table, "our_exposure_class", result.explorer_url, "exposure_class") }}
<h3>By approach</h3>
{{ drill_table(result.approach_table, "our_approach", result.explorer_url, "approach") }}

<h2>3 · Worklist — top {{ result.biggest_n }} of {{ "{:,}".format(result.break_count) }} break(s), largest first</h2>
<p class="muted">Click a key to open its single-loan forensic, or
<a href="{{ result.explorer_url }}">open the full per-key explorer</a>
({{ "{:,}".format(result.total_rows) }} row(s)). Download the full per-key detail:
<a href="{{ result.export_csv_url }}">CSV</a> · <a href="{{ result.export_excel_url }}">Excel</a>.</p>
{{ drill_table(result.biggest_breaks, "_recon_key", result.loan_url_base, "key") }}
<p>
  <a class="btn btn-primary" href="{{ result.explorer_url }}">Explore all {{ "{:,}".format(result.total_rows) }} rows →</a>
</p>

{% endif %}
{% endif %}
{% endblock %}