<link rel="stylesheet" type="text/css" href="plugins/Goals/stylesheets/goals.css"/>

{% include "@Goals/_titleAndEvolutionGraph.twig" %}
{% set sum_nb_conversions=nb_conversions %}

{% for goal in goalMetrics %}
    {% set nb_conversions=goal.nb_conversions %}
    {% set nb_visits_converted=goal.nb_visits_converted %}
    {% set conversion_rate=goal.conversion_rate %}
    {% set name=goal.name %}
    <div class="goalEntry" style="clear:both">
        <h2>
            <a href="javascript:broadcast.propagateAjax('module=Goals&action=goalReport&idGoal={{ goal.id }}')">
                {{ 'Goals_GoalX'|translate("'"~name~"'") }}
            </a>
        </h2>

        {% if not isWidget %}
        <div class="row">
            <div class="col-md-6">
        {% endif %}

                <div class="sparkline">{{ sparkline(goal.urlSparklineConversions) }}
                    {{ 'Goals_Conversions'|translate("<strong>"~nb_conversions|number~"</strong>")|raw }}
                    {% if goal.goalAllowMultipleConversionsPerVisit %}
                        ({{ 'General_NVisits'|translate("<strong>"~nb_visits_converted|number~"</strong>") | raw }})
                    {% endif %}
                </div>

        {% if not isWidget %}
            </div>
            <div class="col-md-6">
        {% endif %}

                <div class="sparkline">{{ sparkline(goal.urlSparklineConversionRate) }}
                    {{ 'Goals_ConversionRate'|translate("<strong>"~conversion_rate|percent~"</strong>")|raw }}
                </div>

        {% if not isWidget %}
            </div>
        </div>
        {% endif %}

    </div>
{% endfor %}

{% if displayFullReport %}
    {% if sum_nb_conversions != 0 %}
    <h2 id='titleGoalsByDimension'>
        {% if idGoal is defined %}
            {{ 'Goals_GoalConversionsBy'|translate(goalName) }}
        {% else %}
            {{ 'Goals_ConversionsOverviewBy'|translate }}
        {% endif %}
    </h2>
    {{ goalReportsByDimension|raw }}
    {% endif %}
{% endif %}
