{% 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">
        <div class="visitor-profile-options">
            <a href class="visitor-profile-close" title="{{ 'General_Close'|translate }} "></a>
            <a href="https://matomo.org/docs/user-profile/" class="visitor-profile-help" rel="noreferrer"
               target="_blank"
               title="{{ 'General_ViewDocumentationFor'|translate("Live_VisitorProfile"|translate|ucwords) }}">
            </a>
            <a href class="visitor-profile-toggle-actions" title="{{ 'Live_ToggleActions'|translate }} "></a>
        </div>
        <div class="visitor-profile-info">
            <div class="visitor-profile-overview">
                <div class="visitor-profile-header">
                    <div class="visitor-profile-avatar">
                        <img src="{{ visitorData.visitorAvatar|default("plugins/Live/images/unknown_avatar.png") }}"
                             alt="{{ visitorData.visitorDescription|default('') }}"
                             title="{{ visitorData.visitorDescription|default('') }}"/>
                    </div>
                    <div class="visitor-profile-header-details">
                        <div class="visitor-profile-headline">
                            {% if visitorData.previousVisitorId is not empty %}<a class="visitor-profile-prev-visitor"
                                                                                  href="#"
                                                                                  title="{{ 'Live_PreviousVisitor'|translate }}">
                                    &larr;</a>{% endif %}
                            <h1>
                                {%- if visitorData.userId is empty %}
                                    {{ 'Live_VisitorProfile'|translate }}
                                {%- else %}
                                    <span title="{{ 'General_UserId'|translate }}: {{ visitorData.userId|rawSafeDecoded }}">{{ visitorData.userId|rawSafeDecoded }}</span>
                                {% endif -%}
                            </h1>
                            {% 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">
                            <div class="visitor-profile-id">
                                <span>{{ 'General_Id'|translate|upper }}</span>
                                {% if widgetizedLink is defined %}<a class="visitor-profile-widget-link"
                                                                     href="{{ widgetizedLink }}" target="_blank"
                                                                     title="{{ 'Widgetize_OpenInNewWindow'|translate }} - {{ 'Live_VisitorProfile'|translate }} {{ 'General_Id'|translate|upper }} {{ visitorData.visitorId }}">{% endif %}
                                    <span>{{ visitorData.visitorId }}</span>
                                    {%- if widgetizedLink is defined %}</a>{% endif %}
                                <a class="visitor-profile-export" href="{{ exportLink }}" target="_blank"
                                   title="{{ 'General_ExportThisReport'|translate }}">
                                    <span class="icon-export"></span>
                                </a>
                            </div>
                            {{ postEvent('Live.renderVisitorIcons', visitorData.lastVisits|first) }}
                        </div>
                    </div>
                </div>

                {{ profileSummary|raw }}

                {{ postEvent('Template.afterVisitorProfileOverview') }}
            </div>
            <div class="visitor-profile-visits-info">
                <div class="visitor-profile-visits-container">
                    <ol class="visitor-profile-visits">
                        {% include "@Live/getVisitList.twig" with {'visits': visitorData.lastVisits, 'startCounter': visitorData.totalVisits} %}
                    </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">
                            {% if visitorData.hasMoreVisits %}
                                {{ 'Live_LimitedVisitsShown'|translate('<strong>' ~ visitorData.totalVisits ~ '</strong>')|raw }}
                            {% else %}
                                {{ 'Live_NoMoreVisits'|translate }}
                            {% endif %}
                        </span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            require('piwik/UI').VisitorProfileControl.initElements();
        });
    </script>
{% endif %}