<h4 class="mt-3 ml-1" id="nearest-location-city" data-lat="{{ location.lat }}" data-long="{{ location.long }}">
    <i class="fas fa-city"></i>&nbsp;
    Ort:&nbsp;{{ location.city }}
</h4>
<h4 class="mt-3 ml-1">
    <i class="fas fa-list-ol"></i>&nbsp;
    Die {{ limit }} nächsten {{subject}}:
</h4>
<ul class="list-group mt-3 {% if showTooltips %} showTooltips {% endif %}" id="nearest-locations-list">
    {% for l in locations|slice(0, limit) %}
        <li class="list-group-item" data-lat="{{ l.lat }}" data-long="{{ l.long }}">
            {% if l.pretitle_text is not empty and l.pretitle_color is not empty %}
                <span class="w-100 py-2" style="color: {% if '#' not in l.pretitle_color %}#{% endif %}{{ l.pretitle_color }}">{{ l.pretitle_text }}</span>
            {% endif %}
            <div class="d-flex w-100 justify-content-between align-items-center">
                {% if l.link is not empty %}<a href="{{ l.link }}" title="{{ l.name }}" class="mb-0" target="_blank">{% endif %}
                    <h4 class="m-0 nearest-location-item-name">{{ l.name|raw }}</h4>
                {% if l.link is not empty %}</a>{% endif %}
                <span class="badge badge-secondary">{{ l.distance|number_format(0) }}&nbsp;km</span>
            </div>
            {% if l.description is not empty %}
                <p class="my-2">{{ l.description }}</p>
            {% endif %}
            <ul class="pl-4">
            {% if l.address is not empty %}
                <li>{{ l.address }} </li>
            {% endif %}
            {% if l.phone is not empty %}
                <li>Tel.: {{ l.phone }} </li>
            {% endif %}
            {% if l.mail is not empty %}
                <li>E-Mail: <a href="mailto:{{l.mail}}">{{ l.mail }}</a> </li>
            {% endif %}
            </ul>
        </li>
    {% endfor %}
</ul>