{% if not visitorData %}
    <div class="pk-emptyDataTable">{{ 'CoreHome_ThereIsNoDataForThisReport'|translate }}</div>
{% else %}
<div class="visitor-profile"
     data-visitor-id="{{ visitorData.lastVisits.getFirstRow().getColumn('visitorId') }}"
     data-next-visitor="{{ visitorData.nextVisitorId }}"
     data-prev-visitor="{{ visitorData.previousVisitorId }}"
     tabindex="0">
    <a href class="visitor-profile-close"></a>
    <div class="visitor-profile-info">
        <div>
            <div class="visitor-profile-overview">
                <div class="visitor-profile-avatar">
                    <div>
                        <div class="visitor-profile-image-frame">
                            <img src="{{ visitorData.visitorAvatar|default("plugins/Live/images/unknown_avatar.jpg") }}"
                                 alt="{{ visitorData.visitorDescription|default('') }}"
                                 title="{{ visitorData.visitorDescription|default('') }}" />
                        </div>
                        <img src="plugins/Live/images/paperclip.png" alt=""/>
                    </div>
                    <div>
                        <div class="visitor-profile-header">
                            {% if visitorData.previousVisitorId is not empty %}<a class="visitor-profile-prev-visitor" href="#" title="{{ 'Live_PreviousVisitor'|translate }}">&larr;</a>{% endif %}
                            <h1>{{ 'Live_VisitorProfile'|translate }}
                                {%- if visitorData.userId is not empty %}: <span title="{{'General_UserId'|translate}}: {{ visitorData.userId|raw }}">{{ visitorData.userId|raw }}</span>{% endif -%}
                                <img class="loadingPiwik" style="display:none;" src="plugins/Morpheus/images/loading-blue.gif"/>
                            </h1>
                            <a href="http://piwik.org/docs/user-profile/" class="visitorProfileHelp" rel="noreferrer"  target="_blank" title="{{ 'General_ViewDocumentationFor'|translate("Live_VisitorProfile"|translate|ucwords) }}">
                                <span class="icon-help"></span>
                            </a>
                            {% if visitorData.nextVisitorId is not empty %}<a class="visitor-profile-next-visitor" href="#" title="{{ 'Live_NextVisitor'|translate }}">&rarr;</a>{% endif %}
                        </div>
                        <div class="visitor-profile-latest-visit">
                            {% include "@Live/getSingleVisitSummary.twig" with {'visitData': visitorData.lastVisits.getFirstRow().getColumns(), 'showLocation': false} %}
                        </div>
                    </div>
                    <p style="clear:both; border:none!important;"></p>
                </div>
                <div class="visitor-profile-summary">
                    <h1>{{ 'General_Summary'|translate }}</h1>
                    <div>
                        <p>{{ 'Live_VisitSummary'|translate('<strong>' ~ visitorData.totalVisitDurationPretty ~ '</strong>', '', '', '<strong>', visitorData.totalActions, visitorData.totalVisits, '</strong>')|raw }}</p>
                        <p>{% if visitorData.totalGoalConversions %}<strong>{% endif %}{{ 'Live_ConvertedNGoals'|translate(visitorData.totalGoalConversions) }}{% if visitorData.totalGoalConversions %}</strong>{% endif %}
                        {%- if visitorData.totalGoalConversions %} (
                            {%- for idGoal, totalConversions in visitorData.totalConversionsByGoal -%}
                            {%- set idGoal = idGoal[7:] -%}
                            {%- if not loop.first %}, {% endif -%}{{- totalConversions }} <span class="visitor-profile-goal-name">{{ goals[idGoal]['name'] -}}</span>
                            {%- endfor -%}
                        ){% endif %}.</p>
                        {% if visitorData.totalEcommerceConversions|default(0) > 0 or visitorData.totalAbandonedCarts|default(0) > 0%}
                        <p>
                            {{ 'Goals_Ecommerce'|translate }}:
                            {%- if visitorData.totalEcommerceConversions|default(0) > 0 %} {{ 'Live_EcommerceSummaryConversions'|translate('<strong>', visitorData.totalEcommerceConversions, visitorData.totalEcommerceRevenue|money(idSite), '</strong>', visitorData.totalEcommerceItems)|raw }}
                            {%- endif -%}
                            {%- if visitorData.totalAbandonedCarts|default(0) > 0 %} {{ 'Live_AbandonedCartSummary'|translate('<strong>', visitorData.totalAbandonedCarts, '</strong>', visitorData.totalAbandonedCartsItems, '<strong>', visitorData.totalAbandonedCartsRevenue|money(idSite), '</strong>')|raw }}{%- endif -%}
                        </p>
                        {% endif %}
                        {% if visitorData.totalSearches|default(0) %}
                        <p>
                            {{ 'Actions_WidgetSearchKeywords'|translate }}:
                            {%- for entry in visitorData.searches %} <strong title="{% if entry.searches == 1 %}{{ 'Actions_OneSearch'|translate }}{% else %}{{ 'UserCountryMap_Searches'|translate(entry.searches) }}{% endif %}">{{ entry.keyword }}</strong>{% if not loop.last %},{% endif %}{% endfor %}
                        </p>
                        {% endif %}
                        {% if visitorData.averagePageGenerationTime is defined %}
                        <p title="{{ 'Live_CalculatedOverNPageViews'|translate(visitorData.totalPageViewsWithTiming) }}">
                            {{ 'Live_AveragePageGenerationTime'|translate('<strong>' ~ visitorData.averagePageGenerationTime ~ 's</strong>')|raw }}
                        </p>
                        {% endif %}
                    </div>
                </div>
                <div class="visitor-profile-important-visits">
                    {%- set keywordNotDefined = 'General_NotDefined'|translate('General_ColumnKeyword'|translate) -%}
                    <div>
                        <h1>{% if visitorData.visitsAggregated == 100 %}{{ 'General_Visit'|translate }}# 100{% else %}{{ 'Live_FirstVisit'|translate }}{% endif %}</h1>
                        <div>
                            <p><strong>{{ visitorData.firstVisit.prettyDate }}</strong><span>&nbsp;- {{ 'UserCountryMap_DaysAgo'|translate(visitorData.firstVisit.daysAgo) }}</span></p>
                            <p><span>{{ 'General_FromReferrer'|translate }}</span>
                            <strong {% if visitorData.firstVisit.referrerType == 'search' and '(' not in visitorData.firstVisit.referralSummary %}title="{{ keywordNotDefined }}"{% endif %}>{{ visitorData.firstVisit.referralSummary }}</strong></p>
                        </div>
                    </div>
                    {% if visitorData.lastVisits.getRowsCount() != 1 %}
                    <div>
                        <h1>{{ 'Live_LastVisit'|translate }}</h1>
                        <div>
                            <p><strong>{{ visitorData.lastVisit.prettyDate }}</strong><span>&nbsp;- {{ 'UserCountryMap_DaysAgo'|translate(visitorData.lastVisit.daysAgo) }}</span></p>
                            <p><span>{{ 'General_FromReferrer'|translate }}</span>
                            <strong {% if visitorData.lastVisit.referrerType == 'search' and '(' not in visitorData.lastVisit.referralSummary %}title="{{ keywordNotDefined }}"{% endif %}>{{ visitorData.lastVisit.referralSummary }}</strong></p>
                        </div>
                    </div>
                    {% endif %}
                </div>
                <div>
                    <div class="visitor-profile-location">
                        <h1>{{ 'UserCountry_Location'|translate }}</h1>
                        <p>
                            {%- for entry in visitorData.countries -%}

                                {% set entryCity -%}
                                    {% if entry.cities is defined and 1 == entry.cities|length and entry.cities|join -%}
                                        {{ entry.cities|join }}
                                    {%- elseif entry.cities is defined and 1 < entry.cities|length -%}
                                        <span title="{{ entry.cities|join(', ') }}">{{ 'UserCountry_FromDifferentCities'|translate }}</span>
                                    {%- endif %}
                                {%- endset %}

                                {% set entryVisits -%}
                                    <strong>
                                        {% if entry.nb_visits == 1 -%}
                                            {{ 'General_OneVisit'|translate }}
                                        {%- else -%}
                                            {{ 'General_NVisits'|translate(entry.nb_visits) }}
                                        {%- endif -%}
                                    </strong>
                                {%- endset %}

                                {% set entryCountry -%}
                                    {%- if entryCity -%}
                                        {{ 'UserCountry_CityAndCountry'|translate(entryCity, entry.prettyName)|raw }}
                                    {%- else -%}
                                        {{ entry.prettyName }}
                                    {%- endif -%}

                                    &nbsp;<img src="{{ entry.flag }}" title="{{ entry.prettyName }}"/>
                                {%- endset %}

                                {{- 'General_XFromY'|translate(entryVisits, entryCountry)|raw -}}{% if not loop.last %}, {% endif %}
                                {%- endfor %}
                                <a class="visitor-profile-show-map" href="#" {% if userCountryMapUrl|default('') is empty %}style="display:none"{% endif %}>({{ 'Live_ShowMap'|translate|replace({' ': '&nbsp;'})|raw }})</a> <img class="loadingPiwik" style="display:none;" src="plugins/Morpheus/images/loading-blue.gif"/>
                        </p>
                        <div class="visitor-profile-map" style="display:none" data-href="{{ userCountryMapUrl|default('') }}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="visitor-profile-visits-info">
                <div class="visitor-profile-pages-visited">
                    <h1>{{ 'Live_VisitedPages'|translate }}</h1>
                </div>
                <div class="visitor-profile-visits-container">
                    <ol class="visitor-profile-visits">
                        {% include "@Live/getVisitList.twig" with {'visits': visitorData.lastVisits, 'startCounter': 1} %}
                    </ol>
                </div>
                <div class="visitor-profile-more-info">
                    {% if visitorData.lastVisits.getRowsCount() >= constant("Piwik\\Plugins\\Live\\VisitorProfile::VISITOR_PROFILE_MAX_VISITS_TO_SHOW") %}
                    <a href="#">{{ 'Live_LoadMoreVisits'|translate }}</a> <img class="loadingPiwik" style="display:none;" src="plugins/Morpheus/images/loading-blue.gif"/>
                    {% else %}
                    <span class="visitor-profile-no-visits">{{ 'Live_NoMoreVisits'|translate }}</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(function() { require('piwik/UI').VisitorProfileControl.initElements(); });
</script>
{% endif %}