{% macro customVar(id, customVariable) %}
    {% set name='customVariableName' ~ id %}
    {% set value='customVariableValue' ~ id %}
    <li><span>{{ customVariable[name]|truncate(30) }}</span>{% if customVariable[value]|length > 0 %}<strong>{{ customVariable[value]|truncate(50) }}</strong>{% endif %}</li>
{% endmacro %}
{% import _self as macros %}
{% if showLocation|default(false) %}
<div class="visitor-profile-latest-visit-loc" title="{{ visitData.location }}">
    <img src="{{ visitData.countryFlag }}"/>&nbsp;<span>{% if visitData.city is not empty %}{{ visitData.city }}{% else %}{{ visitData.country }}{% endif %}</span>
</div>
{% endif %}
<div class="visitor-profile-latest-visit-column">
    <ul>
        <li>
            <span>{{ 'General_IP'|translate }}</span><strong {% if visitData.providerName is defined and visitData.providerName is not empty %}title="{{ 'Provider_ColumnProvider'|translate }}: {{ visitData.providerName }}"{% endif %}>{{ visitData.visitIp }}</strong>
        </li>
        <li 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 }} {{ visitData.visitorId }}">{% endif %}
                <strong>{{ visitData.visitorId }}</strong>
            {% 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>
        </li>
        <li>
            {% if visitData.browserName is defined %}
            <div class="visitor-profile-browser" title="{% if visitData.plugins is not defined %}{{ visitData.browser }}{% elseif visitData.plugins %}{{ 'DevicePlugins_BrowserWithPluginsEnabled'|translate(visitData.browser, visitData.plugins) }}{% else %}{{ 'DevicePlugins_BrowserWithNoPluginsEnabled'|translate(visitData.browser) }}{% endif %}">
                {% if visitData.browserIcon is defined %}<img src="{{ visitData.browserIcon }}" width="16px" height="16px"/>{% endif %}<span>{{ visitData.browserName|split(' ')[0] }}</span>
            </div>
            {% endif %}

            <div class="visitor-profile-os">
                {% if visitData.operatingSystemIcon is defined %}<img src="{{ visitData.operatingSystemIcon }}" width="16px" height="16px"/>{% endif %}{% if visitData.operatingSystem is defined %}<span>{{ visitData.operatingSystem }}</span>{% endif %}
            </div>
        </li>
        {% if visitData.resolution is defined %}<li><span>{{ 'Resolution_ColumnResolution'|translate }}</span><strong>{{ visitData.resolution }}</strong></li>{% endif %}
        {% if visitData.userId is not empty %}<li><span>{{ 'General_UserId'|translate }}</span><strong>{{ visitData.userId|raw }}</strong></li>{% endif %}
        {% if visitReferralSummary is defined %}
        {%- set keywordNotDefined = 'General_NotDefined'|translate('General_ColumnKeyword'|translate) -%}
        <li>
            <span>{{ 'General_DateRangeFrom'|translate }}</span>
            <strong {% if visitData.referrerType == 'search' and '(' not in visitReferralSummary %}title="{{ keywordNotDefined }}"{% endif %}>{{ visitReferralSummary }}</strong>
        </li>
        {% endif %}
    </ul>
</div>
<div class="visitor-profile-latest-visit-column">
    {% if visitData.customVariables is defined %}
    <ul>
        {% for id,customVariable in visitData.customVariables %}
        {% if loop.index0 < 4 %}
            {{ macros.customVar(id, customVariable) }}
        {% endif %}
        {% endfor %}
    </ul>
    {% endif %}
    {% if visitData.customVariables is defined and visitData.customVariables|length > 4 %}
    <ul class="visitor-profile-extra-cvars" style="display:none;">
        {% for id,customVariable in visitData.customVariables %}
        {% if loop.index0 >= 4 %}
            {{ macros.customVar(id, customVariable) }}
        {% endif %}
        {% endfor %}
    </ul>
    <p class="visitor-profile-see-more-cvars"><a href="#">&#x25bc;</a></p>
    {% endif %}
</div>
