{#
  partials/injected_content.html — Phase 2 injection template
  Assembles metrics, results table, and step logs injected into
  the <div id="step-logs"> placeholder.

  Context variables:
    metrics           — dict (total, passed, failed, pass_rate, pass_rate_str, duration)
    execution_results — list of result dicts
    steps_by_tc       — dict mapping test_case_id -> list of step dicts
#}

{# #5 Summary bar #}
{% set _pct = metrics.pass_rate | default(0) %}
<div class="summary-bar">
    <div class="summary-pass" style="width:{{ _pct }}%"></div>
    <div class="summary-fail" style="width:{{ 100 - _pct }}%"></div>
</div>

{% include "partials/metrics_section.html" %}

{# #10 Execution Results divider #}
<div class="sec-div">
    <div class="sec-div-line"></div>
    <svg class="sec-div-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
    </svg>
    <span class="sec-div-label">Execution Results</span>
    <div class="sec-div-line"></div>
</div>

{% include "partials/search_bar.html" %}
{% include "partials/results_table.html" %}

{# #11 Step Logs divider + #14 Expand/Collapse inline #}
<div class="sec-div" style="margin-top:1.5rem">
    <div class="sec-div-line"></div>
    <svg class="sec-div-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path d="M4 6h16M4 12h16M4 18h7"/>
    </svg>
    <span class="sec-div-label">Step Logs</span>
    <div class="sec-div-line"></div>
    <button class="filter-btn" onclick="expAll()" style="flex-shrink:0">Expand All</button>
    <button class="filter-btn" onclick="colAll()" style="flex-shrink:0">Collapse All</button>
</div>

{% include "partials/step_tabs.html" %}

<script>
(function(){
  var hb=document.getElementById('header-badges');
  if(hb){
    var bp=document.createElement('span');bp.className='s-badge pass';bp.style.padding='0.25rem 0.75rem';
    bp.textContent='{{ metrics.passed }} Passed';hb.appendChild(bp);
    var bf=document.createElement('span');bf.className='s-badge fail';bf.style.padding='0.25rem 0.75rem';
    bf.textContent='{{ metrics.failed }} Failed';hb.appendChild(bf);
  }
  var hsb=document.getElementById('hero-status-badge');
  if(hsb){
    hsb.className='s-badge {{ "fail" if metrics.failed > 0 else "pass" }}';
    hsb.style.cssText='position:absolute;top:1.5rem;right:1.5rem;padding:.375rem 1rem;font-size:.875rem';
    hsb.textContent='{{ "FAILED" if metrics.failed > 0 else "ALL PASSED" }}';
  }
})();
</script>