{#- partials/step_tabs.html
    Sidebar + step-area layout for per-test-case step logs.

    Context:
        steps_by_tc — dict mapping test_case_id (str) -> list of step dicts

    Requires:
        app.js          showTC(), goStep(), expAll(), colAll(), aTab()
        components.css  .slogs, .slogs-layout, .sidebar-*, .tc-panel, .scard-*
                        .st-sep, .step-group-label
#}

<div class="slogs">
    <div class="slogs-layout">

        <!-- Sidebar: test case navigation -->
        <div class="sidebar">
            <div class="sidebar-card">
                <div class="sidebar-title">Test Cases</div>
                {% for tc_id, steps in steps_by_tc.items() %}
                {% set has_fail = steps | selectattr('result', 'equalto', 'FAIL') | list | length > 0 %}
                {% set has_warn = steps | selectattr('result', 'equalto', 'WARN') | list | length > 0 %}
                {% set dot_cls = 'fail' if has_fail else ('warn' if has_warn else 'pass') %}
                <div id="btn-tab-{{ tc_id }}" class="sidebar-item{% if loop.first %} active{% endif %}"
                     onclick="showTestCaseTab('{{ tc_id }}', this)">
                    <span class="si-dot {{ dot_cls }}"></span>
                    <span>{{ tc_id }}</span>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Step area: one panel per test case -->
        <div class="step-area">
            {% for tc_id, steps in steps_by_tc.items() %}
            <div id="tab-{{ tc_id }}" class="tc-panel{% if not loop.first %} hidden{% endif %}">
                {%- set total_steps = steps | length -%}
                {#- #19 Phase dividers + #20 Step group labels -#}
                {%- set ns = namespace(prev_phase='', prev_group='') -%}
                {% for step in steps %}
                {#- #19 Render phase divider when phase changes #}
                {%- if step.phase and step.phase != ns.prev_phase %}
                {%- set ns.prev_phase = step.phase %}
                <div class="st-sep"><div class="st-line"></div><div class="st-lbl">{{ step.phase }}</div><div class="st-line"></div></div>
                {%- endif %}
                {#- #20 Render group label when step_group changes #}
                {%- if step.step_group and step.step_group != ns.prev_group %}
                {%- set ns.prev_group = step.step_group %}
                <div class="step-group-label">&#8212; {{ step.step_group }}</div>
                {%- endif %}
                {% include "partials/step_card.html" %}
                {% endfor %}
            </div>
            {% endfor %}
        </div>

    </div>
</div>