{% set test_status=pass_fail_data["Overall status"] %}

<div id="pass-fail-container">
    <h1>Test Result</h1>
    <div id="pass-fail-section">

        {% if test_status %}

        <div id="pass-fail-visual" class="pass">
            <svg id="pass-img" class="pass-fail-img" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 29 29">
                <circle cx="14.5" cy="14.5" r="13.5" fill="none" stroke="#95c23d" stroke-width="2" />
                <path d="m8.5,14.5l4.5,4.5,7.5-9" fill="none" stroke="#95c23d" stroke-width="2" />
            </svg>
            <h2 class="pass-fail-text">PASS</h2>
        </div>

        {% else %}
        <div id="pass-fail-visual" class="fail">
            <svg id="fail-img" class="pass-fail-img" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 29 29">
                <path
                    d="m14.5,28c-1.77,0-3.53-.35-5.17-1.03-1.64-.68-3.13-1.67-4.38-2.93-1.25-1.25-2.25-2.74-2.93-4.38-.68-1.64-1.03-3.39-1.03-5.17s.35-3.53,1.03-5.17c.68-1.64,1.67-3.13,2.93-4.38,1.25-1.25,2.74-2.25,4.38-2.93,1.64-.68,3.39-1.03,5.17-1.03s3.53.35,5.17,1.03c1.64.68,3.13,1.67,4.38,2.93,1.25,1.25,2.25,2.74,2.93,4.38.68,1.64,1.03,3.39,1.03,5.17s-.35,3.53-1.03,5.17c-.68,1.64-1.67,3.13-2.93,4.38-1.25,1.25-2.74,2.25-4.38,2.93-1.64.68-3.39,1.03-5.17,1.03h0Z"
                    fill="none" stroke="#e73439" stroke-linecap="round" stroke-width="2" />
                <path d="m10,10l9,9" fill="none" stroke="#e73439" stroke-linecap="round" stroke-width="2" />
                <path d="m19,10l-9,9" fill="none" stroke="#e73439" stroke-linecap="round" stroke-width="2" />
            </svg>
            <h2 class="pass-fail-text">FAIL</h2>
        </div>
        {% endif %}
    </div>
</div>