{% if case_flow and case_flow.nodes %}
{% set _clauses = case_flow.nodes|selectattr('layer', 'equalto', 1)|list|length %}
{% set _rich = (case is defined and case.decisions|length >= 2) or _clauses >= 2 %}
{% if _rich %}
<div class="card">
  <div style="font-weight:700; font-size:14px; margin-bottom:2px;">{{ t('cflow.title') }}</div>
  <p class="meta" style="margin:0 0 10px;">{{ t('cflow.desc')|safe }}</p>
  <div id="case-flow"></div>
  <div id="case-flow-detail" style="margin-top:10px;"></div>
</div>
<script>
  (function () {
    var d = {{ case_flow|tojson }};
    function go() { if (window.renderSankey) renderSankey('case-flow', d, { detail: true, minHeight: 130, maxVh: '46' }); }
    if (window.renderSankey) go(); else document.addEventListener('DOMContentLoaded', go);
  })();
</script>
{% else %}
<details class="acc" id="case-flow-acc">
  <summary>{{ t('cflow.title') }}</summary>
  <p class="meta" style="margin:6px 0 10px;">{{ t('cflow.desc')|safe }}</p>
  <div id="case-flow"></div>
  <div id="case-flow-detail" style="margin-top:10px;"></div>
</details>
<script>
  (function () {
    var d = {{ case_flow|tojson }};
    var acc = document.getElementById('case-flow-acc');
    if (!acc) return;
    function go() {
      if (acc.dataset.done || !window.renderSankey) return;
      acc.dataset.done = '1';
      renderSankey('case-flow', d, { detail: true, minHeight: 130, maxVh: '46' });
    }
    acc.addEventListener('toggle', function () { if (acc.open) go(); });
  })();
</script>
{% endif %}
{% endif %}