<div id="{{name}}" class="feature-container">
    <div class="feature">
        <div>
            <div class="flex-center">
                <div style="flex-shrink: 0;">
                    {% import './components/badge.html' as badge %}
                    {% if passed != 0 %}
                    {{badge.passed(passed)}}
                    {% endif %}
                    {% if skipped != 0 %}
                    {{ badge.skipped(skipped) }}
                    {% endif %}
                    {% if failed != 0 %}
                    {{ badge.failed(failed) }}
                    {% endif %}

                </div>

                <h2 class="no-margin">
                    <span>Feature</span>: {{name}}
                </h2>
            </div>

            {% import './components/icon.html' as icons %}
            <p class="secondary-text no-margin flex-center">{{icons.folder('1rem', '1rem')}} {{id}}</p>

            {% if description != "" %}
            <p class="secondary-text" style="margin: 0.5rem 0 0 0;">Description: {{description}}</p>
            {%endif%}

            {% if tags != "" %}
            <p class="secondary-text" style="margin: 0.5rem 0 0 0;">Tags: {{tags}}</p>
            {%endif%}
        </div>

        <div class="flex-column">
            {% import './components/duration.html' as execution %}
            {{execution.feature(duration, "Executed in")}}

            {% if failed != 0 %}
            {% import './components/failed_scenarios_link.html' as fsl %}
            {{fsl.failedScenariosLink(failed_scenarios_names)}}
            {% endif %}
        </div>
    </div>


    <div class="flex-column" style="width: 100%; gap: 1rem;">
        {{scenarios|safe}}
    </div>
</div>