{# Twig vars are commented: they are loaded with AJAX, they are still here as a placeholder #}
<div class="dashboard__content__item">
    <div id="dashboard-chart--audience" class="dashboard-chart dashboard-chart--full-width"></div>
    <ul class="dashboard-chart-list">
        <li class="dashboard-chart-list__item">
            <i class="fa fa-users dash-icon--big dash-icon--circle dash-icon--circle--orange dashboard-chart-list__icon"></i>
            <p class="dashboard-chart-list__data">
                <span id="audience-data_visitors" class="text--big dashboard-chart-list__data__number">{# {{ overview.visitors }} #}</span>
                {{ 'dashboard.ga.chart.users' | trans }}
            </p>
        </li>
        <li class="dashboard-chart-list__item">
            <i class="fa fa-server dash-icon--big dash-icon--circle dash-icon--circle--purple dashboard-chart-list__icon"></i>
            <p class="dashboard-chart-list__data">
                <span id="audience-data_visits" class="text--big dashboard-chart-list__data__number">{# {{ overview.visits }} #}</span>
                {{ 'dashboard.ga.chart.sessions' | trans }}
            </p>
        </li>
        <li class="dashboard-chart-list__item">
            <i class="fa fa-eye dash-icon--big dash-icon--circle dash-icon--circle--blue dashboard-chart-list__icon"></i>
            <p class="dashboard-chart-list__data">
                <span id="audience-data_pageviews" class="text--big dashboard-chart-list__data__number">{# {{ overview.pageviews }} #}</span>
                {{ 'dashboard.ga.chart.pageviews' | trans }}
            </p>
        </li>
        <li class="dashboard-chart-list__item">
            <i class="fa fa-star dash-icon--big dash-icon--circle dash-icon--circle--red dashboard-chart-list__icon"></i>
            <p class="dashboard-chart-list__data">
                <span id="audience-data_new_users" class="text--big dashboard-chart-list__data__number">{# {{ overview.newSessions }} #}</span>
                {{ 'dashboard.ga.chart.pct_new_sessions' | trans }}
            </p>
        </li>
        <li class="dashboard-chart-list__item">
            <i class="fa fa-files dash-icon--big dash-icon--circle dash-icon--circle--grey dashboard-chart-list__icon"></i>
            <p class="dashboard-chart-list__data">
                <span id="audience-data_pages_per_visit" class="text--big dashboard-chart-list__data__number">{# {{ overview.pagesPerVisit }} #}</span>
                {{ 'dashboard.ga.chart.avg_pages_p_session' | trans }}
            </p>
        </li>
        <li class="dashboard-chart-list__item">
            <i class="fa fa-clock dash-icon--big dash-icon--circle dash-icon--circle--grey dashboard-chart-list__icon"></i>
            <p class="dashboard-chart-list__data">
                <span id="audience-data_avg_visit_duration" class="text--big dashboard-chart-list__data__number">{# {{ overview.avgVisitDuration }} seconds #}</span>
                {{ 'dashboard.ga.chart.avg_session_duration' | trans }}
            </p>
        </li>
    </ul>
</div>