<div class="col-md-4">
    <div class="panel panel-default report-list">
        <div class="panel-heading">
                <h3 class="panel-title">
                    {{ graph.name|trans }}
                    <div class="pull-right">
                        <span class="fa {{ graph.iconClass|default('') }}"></span>
                    </div>
                </h3>
        </div>
        {% if graph.data|length > 0 %}
            <div class="table-responsive panel-collapse pull out">
                {# We need to dynamically create the table headers based on the result set #}
                <table class="table table-hover report-list" id="reportTable">
                    <thead>
                        <tr>
                            {% for key, value in graph.data[0]|filter((v, k) => 'id' != k) %}
                              <th class="col-report-count">{{ key|capitalize }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for rowKey, row in graph.data %}
                            {% if row['id']|default(null) is not null %}
                                <tr>
                                    {% for cellName, cell in row %}
                                        {% if graph.data[0].id is defined and 'title' == cellName and graph.link is defined %}
                                            <td>
                                                <a href="{{ path(graph.link, {'objectAction': 'view', 'objectId': row.id}) }}" data-toggle="ajax">
                                                    {{ cell }}
                                                </a>
                                            </td>
                                        {% elseif 'id' != cellName %}
                                            <td>
                                                {% if cell is string %}
                                                    {{ assetMakeLinks(cell) }}
                                                {% else %}
                                                    {{ cell }}
                                                {% endif %}
                                            </td>
                                        {% endif %}
                                    {% endfor %}
                                </tr>
                            {% endif %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="panel-body box-layout">
                <p class="text-secondary">{{ 'mautic.report.table.noresults'|trans }}</p>
            </div>
        {% endif %}
    </div>
</div>
