<div class="card">
        <div class="card-header">
            <div class=row>
                <div class="col-md-6">
                    <a class="card-link collapsed" data-toggle="collapse" data-parent="#card-3"
                        href="#test-id-{{obj.test_id}}">{{obj.test}}</a>
                </div>
                <div class="text-right col-md-6 text-secondary">
                    {{obj.response_time}}ms
                </div>
            </div>
            
        </div>    
        
        <div id="test-id-{{obj.test_id}}" class="collapse">
            <div class="card-body">
                <ul>
                    {% for step in obj.reproduce_steps %}
                        <li class="list-item">
                            {{step}}
                        </li>
                    {% endfor %}

                    <div class="row">
                        <div class="col-md-4">
                        </div>
                        <div class="col-md-4">
                            <br>
                            <button type="button" class="btn btn-info" id="modal-{{obj.test_id}}" href="#modal-container-{{obj.test_id}}" data-toggle="modal">
                                    View Details
                            </button>
                            {% include "modal.html" with obj=obj %}	
                        </div>									
                        <div class="col-md-4">
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    </div>
