{% for group in groups %}
    <div class="row my-2">
        <div class="card bg-dark text-light col-12 col-md-10 mx-auto rounded">
            <div class="card-header text-center pb-0">
                <h4 class="card-title"><strong>{{ group.name }}</strong></h4>
                <h5 class="card-subtitle text-white-50">
                    <ul class="list-inline">
                        <li class="list-inline-item"><span class="badge badge-light"><strong>Ran {{ group.n_tests.total }} test{% if group.n_tests.total > 1 %}s{% endif %}</strong></span></li>
                        <li class="list-inline-item"><span class="badge badge-light"><i class="fa fa-hourglass-half"></i> <strong>{{ group.duration }}</strong></span></li>
                        <li class="list-inline-item"><span class="badge badge-light"><strong class="text-{{ group.status_color }}">{{ group.status }}</strong></span></li>
                    </ul>
                </h5>
            </div>
        {% for testcase in group.testcases %}
            {% include 'testcase.html' %}
        {% endfor %}
            <div class="card-body py-0">
                <h5>
                    {% with n_tests = group.n_tests %}
                       {% include 'info_list.html' %}
                    {% endwith %}
                </h5>
            </div>
        </div>
    </div>
{% endfor %}