{% set view = extension.view() %}
{% set config = view.analysis.config %}

<style>
  .intransit { --intransit-anomaly: #d1495b; --intransit-direct: #e0a020; }
  .intransit h3 { margin: 1.5em 0 .5em; }
  .intransit .it-intro { color: var(--text-color-lighter); max-width: 46em; }
  .intransit .it-controls { display: flex; gap: .5em; align-items: baseline; flex-wrap: wrap; margin: 1em 0; }
  .intransit .it-controls input { width: 4em; }
  .intransit .it-note { padding: .5em .75em; border-left: 3px solid var(--yellow); background: var(--summary-background); margin: 1em 0; }
  .intransit .it-ok { padding: .5em .75em; border-left: 3px solid var(--green); background: var(--summary-background); margin: 1em 0; }
  .intransit .it-cards { display: flex; flex-wrap: wrap; gap: .75em; margin: 1em 0; }
  .intransit .it-card { flex: 1 1 8em; padding: .6em .8em; background: var(--summary-background); border: 1px solid var(--border); border-radius: 3px; }
  .intransit .it-card .it-value { font-size: 1.5em; line-height: 1.2; }
  .intransit .it-card .it-label { color: var(--text-color-lighter); font-size: .85em; }
  .intransit .it-card.it-bad .it-value { color: var(--intransit-anomaly); }
  .intransit .it-chart { overflow-x: auto; margin: .5em 0 1em; }
  .intransit .it-chart svg { display: block; min-width: 46em; width: 100%; height: auto; }
  .intransit .it-node-label { font-size: 12px; fill: var(--text-color); }
  .intransit .it-node-value { font-size: 10px; fill: var(--text-color-lighter); }
  .intransit .it-link { fill-opacity: .45; }
  .intransit .it-link:hover { fill-opacity: .8; }
  .intransit .it-link-direct { fill-opacity: .3; stroke: var(--intransit-direct); stroke-width: 1; stroke-dasharray: 4 3; }
  .intransit .it-legend { display: flex; flex-wrap: wrap; gap: 1.2em; font-size: .85em; color: var(--text-color-lighter); margin-bottom: 1em; }
  .intransit .it-legend span::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .4em; vertical-align: -1px; border-radius: 2px; }
  .intransit .it-legend .it-key-matched::before { background: #4c78a8; opacity: .55; }
  .intransit .it-legend .it-key-unmatched::before { background: var(--intransit-anomaly); opacity: .55; }
  .intransit .it-caption { color: var(--text-color-lighter); font-size: .85em; max-width: 46em; margin: 0 0 .5em; }
  .intransit .it-legend .it-key-direct::before { background: var(--intransit-direct); opacity: .4; border: 1px dashed var(--intransit-direct); }
  .intransit table { width: 100%; }
  .intransit td.num { text-align: right; font-family: var(--font-family-monospaced); white-space: nowrap; }
  .intransit td.src { font-size: .85em; white-space: nowrap; }
  .intransit .it-accounts { color: var(--text-color-lighter); font-size: .9em; }
</style>

<div class="intransit">

  <p class="it-intro">
    Transfers between institutions are booked twice, once on each side, against
    <code>{{ config.transit_account }}</code>. The two legs are paired when they
    are opposite, in the same currency and no more than {{ view.days }} days
    apart; what is left over is either a leg whose counterpart has not been
    imported yet, or a transfer that skipped the transit account altogether.
  </p>

  <form class="it-controls" method="get">
    {% for key, value in request.args.items() %}
      {% if key != "days" %}<input type="hidden" name="{{ key }}" value="{{ value }}">{% endif %}
    {% endfor %}
    <label for="it-days">Pair legs up to</label>
    <input id="it-days" name="days" type="number" min="0" max="365" value="{{ view.days }}">
    <label for="it-days">days apart</label>
    <button type="submit">Apply</button>
  </form>

  {% if view.filtered %}
    <p class="it-note">
      A time filter is active, so the diagram and the tables below only show
      {{ view.begin or "the beginning" }} to {{ view.end or "the end" }}.
      Pairing itself always runs over the whole ledger, otherwise a transfer
      straddling the edge of the period would look unmatched.
    </p>
  {% endif %}

  <div class="it-cards">
    <div class="it-card">
      <div class="it-value">{{ view.postings|length }}</div>
      <div class="it-label">postings on the account</div>
    </div>
    <div class="it-card">
      <div class="it-value">{{ view.pairs|length }}</div>
      <div class="it-label">completed transfers</div>
    </div>
    <div class="it-card {{ 'it-bad' if view.unmatched }}">
      <div class="it-value">{{ view.unmatched|length }}</div>
      <div class="it-label">unmatched legs</div>
    </div>
    <div class="it-card {{ 'it-bad' if view.direct }}">
      <div class="it-value">{{ view.direct|length }}</div>
      <div class="it-label">transfers skipping the account</div>
    </div>
    {% for amount, currency in view.stuck %}
      <div class="it-card it-bad">
        <div class="it-value">{{ amount|format_currency(currency) }} {{ currency }}</div>
        <div class="it-label">net of the unmatched legs</div>
      </div>
    {% endfor %}
  </div>

  {# ---------------------------------------------------------------- Sankey #}

  {% for currency in view.currencies %}
    {% set diagram = view.diagram(currency) %}
    {% if not diagram.empty %}
      <h3>Flows between institutions{% if view.currencies|length > 1 %} — {{ currency }}{% endif %}</h3>
      <div class="it-legend">
        <span class="it-key-matched">completed transfer</span>
        <span class="it-key-unmatched">missing counterpart leg</span>
        <span class="it-key-direct">booked without the transit account</span>
      </div>
      <p class="it-caption">
        On the left, the institution the money left; on the right, the one it
        reached. An institution appears on both sides when it both sends and
        receives, and a ribbon from a name back to itself is a transfer between
        two of its own accounts.
      </p>
      <div class="it-chart">
        <svg viewBox="0 0 {{ diagram.width|round|int }} {{ diagram.height|round|int }}"
             role="img" aria-label="Sankey diagram of transfers in {{ currency }}">
          <g>
            {% for link in diagram.links %}
              <path class="it-link{{ ' it-link-direct' if link.kind == 'direct' }}"
                    d="{{ link.path }}" fill="{{ link.color }}">
                <title>{{ link.source }} &#8594; {{ link.target }}: {{ link.value|format_currency(currency) }} {{ currency }} ({{ link.count }} transfer{{ "" if link.count == 1 else "s" }})</title>
              </path>
            {% endfor %}
          </g>
          <g>
            {% for node in diagram.nodes %}
              <rect x="{{ node.x|round(1) }}" y="{{ node.y|round(1) }}"
                    width="{{ node.width|round(1) }}" height="{{ node.height|round(1) }}"
                    fill="{{ node.color }}" rx="2">
                <title>{{ node.label }}: {{ node.value|format_currency(currency) }} {{ currency }}</title>
              </rect>
              <text class="it-node-label" x="{{ node.label_x|round(1) }}"
                    y="{{ node.center_y|round(1) }}" text-anchor="{{ node.label_anchor }}"
                    dominant-baseline="middle">{% if node.side == 'left' %}<tspan class="it-node-value">{{ node.value|format_currency(currency) }}</tspan><tspan dx="6">{{ node.label }}</tspan>{% else %}<tspan>{{ node.label }}</tspan><tspan class="it-node-value" dx="6">{{ node.value|format_currency(currency) }}</tspan>{% endif %}</text>
            {% endfor %}
          </g>
        </svg>
      </div>
    {% endif %}
  {% endfor %}

  {# ------------------------------------------------------- unmatched table #}

  <h3>Unmatched legs</h3>
  {% if not view.unmatched %}
    <p class="it-ok">Every posting on {{ config.transit_account }} has its counterpart.</p>
  {% else %}
    <table>
      <thead>
        <tr>
          <th>Date</th><th>Amount</th><th>Institution</th>
          <th>Description</th><th>Source</th>
        </tr>
      </thead>
      <tbody>
        {% for posting in view.unmatched %}
          <tr>
            <td>{{ posting.date }}</td>
            <td class="num">{{ posting.amount|format_currency(posting.currency) }} {{ posting.currency }}</td>
            <td>
              {{ posting.institution or "—" }}
              <div class="it-accounts">{{ "sent, never arrived" if posting.outgoing else "arrived, never sent" }}</div>
            </td>
            <td>{{ posting.description }}</td>
            <td class="src">
              <a href="{{ url_for('report', report_name='editor', file_path=posting.filename, line=posting.lineno|string) }}">{{ view.relpath(posting.filename) }}:{{ posting.lineno }}</a>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% endif %}

  {# ---------------------------------------------------------- direct table #}

  <h3>Transfers that skip {{ config.transit_account }}</h3>
  {% if not view.direct %}
    <p class="it-ok">No transfer between institutions was booked directly.</p>
  {% else %}
    <table>
      <thead>
        <tr>
          <th>Date</th><th>Amount</th><th>Accounts</th>
          <th>Description</th><th>Source</th>
        </tr>
      </thead>
      <tbody>
        {% for transfer in view.direct %}
          <tr>
            <td>{{ transfer.date }}</td>
            <td class="num">
              {% if transfer.amount is not none %}
                {{ transfer.amount|format_currency(transfer.currency) }} {{ transfer.currency }}
              {% else %}—{% endif %}
            </td>
            <td class="it-accounts">{{ transfer.accounts|join(" ↔ ") }}</td>
            <td>{{ transfer.description }}</td>
            <td class="src">
              <a href="{{ url_for('report', report_name='editor', file_path=transfer.filename, line=transfer.lineno|string) }}">{{ view.relpath(transfer.filename) }}:{{ transfer.lineno }}</a>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% endif %}

</div>