<div class="{{status}}-scenario scenario-container" id="{{name}}">
    {% if status == "passed"%}
    <details class="scenario scenario-passed">
        {% elif status == "skipped"%}
        <details class="scenario scenario-skipped">
            {% elif status == "failed"%}
            <details class="scenario scenario-failed" open>
                {%endif%}

                <summary class="flex-between" style="width: 100%; cursor: pointer;" id="scenario-summary"
                    title="Show / hide scenario's steps">
                    <div>
                        <div class="flex-center">
                            {% import './components/icon.html' as icon %}
                            {% if status == "passed" %}
                            {{icon.pass('1.17rem','1.17rem')}}
                            {% elif status == "failed" %}
                            {{icon.fail('1.17rem','1.17rem')}}
                            {% else %}
                            {{icon.skip('1.17rem','1.17rem')}}
                            {% endif %}
                            <h3 class="no-margin bold">
                                Scenario: {{name}}
                                {% if parameters != "" %}
                                <span class="semi-bold" style="margin-left: 1rem;">[ {{parameters}} ]</span>
                                {% endif %}
                            </h3>
                        </div>
                        {% if description != "" %}
                        <p style="margin-top: 0.5rem;">Description: {{description}}</p>
                        {%endif%}
                        {% if tags != "" %}
                        <p style="margin: 0; margin-top: 0.5rem;">Tags: {{tags}}</p>
                        {%endif%}
                    </div>
                    <div class="flex-column" style="gap: 0.5rem;">
                        {% import './components/duration.html' as execution %}
                        {{execution.scenario(duration, "Executed in")}}
                        <div id="scenario-details-button">
                            <span id="eye-open">{{icon.eye_open()}}</span>
                            <span id="eye-close">{{icon.eye_close()}}</span>
                        </div>
                    </div>
                </summary>
                <div class="flex-column" style="width: 100%; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem;">
                    {{steps|safe}}
                </div>
                {% if status == "failed" %}
                <details style="margin-top: 0.5rem;">
                    <summary style="cursor: pointer; font-size: 1.25rem;color: var(--failed-fg);"><span
                            class="primary-text" style="color: inherit;">Error
                            message</span></summary>
                    <div id="message-{{name}}" class="monospace">
                        <p style="white-space: pre-wrap; font-size: small;">{{error_message}}</p>
                    </div>
                </details>
                {%endif%}
            </details>
</div>