{# Карточка со списком контактов (email, телефон, сайт, адрес) #}
{# Параметры: user, show_heading (default true), maps_pre_link (optional) — для ссылки Google Maps в адресе #}
{% set _show_heading = show_heading|default(true) %}
<div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
    {% if _show_heading %}
        <h2 class="text-lg font-semibold text-gray-900 px-6 pt-6 pb-2 flex items-center gap-2">
            <i class="fas fa-address-book text-primary"></i>
            {{ 'lang.contactInformation'|trans }}
        </h2>
    {% endif %}
    <ul class="divide-y divide-gray-100 {{ _show_heading ? '' : 'pt-0' }} p-0">
        {% if user.email %}
        <li class="flex items-start gap-4 p-4 hover:bg-gray-50/50 transition-colors">
            <span class="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                <i class="fas fa-envelope"></i>
            </span>
            <div class="min-w-0 flex-1">
                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">{{ 'lang.email'|trans }}</p>
                <a href="mailto:{{ user.email }}" class="text-gray-900 font-medium hover:text-primary transition-colors break-all">{{ user.email }}</a>
            </div>
        </li>
        {% endif %}
        {% if user.cellphone %}
        <li class="flex items-start gap-4 p-4 hover:bg-gray-50/50 transition-colors">
            <span class="flex-shrink-0 w-10 h-10 rounded-lg bg-green-500/10 flex items-center justify-center text-green-600">
                <i class="fas fa-mobile-alt"></i>
            </span>
            <div class="min-w-0 flex-1">
                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">{{ 'lang.cellphone'|trans }}</p>
                <a href="tel:{{ user.cellphone }}" class="text-gray-900 font-medium hover:text-primary transition-colors">{{ user.cellphone }}</a>
            </div>
        </li>
        {% endif %}
        {% if user.phone %}
        <li class="flex items-start gap-4 p-4 hover:bg-gray-50/50 transition-colors">
            <span class="flex-shrink-0 w-10 h-10 rounded-lg bg-gray-200 flex items-center justify-center text-gray-600">
                <i class="fas fa-phone"></i>
            </span>
            <div class="min-w-0 flex-1">
                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">{{ 'lang.phone'|trans }}</p>
                <a href="tel:{{ user.phone }}" class="text-gray-900 font-medium hover:text-primary transition-colors">{{ user.phone }}</a>
            </div>
        </li>
        {% endif %}
        {% if user.myUrl %}
        <li class="flex items-start gap-4 p-4 hover:bg-gray-50/50 transition-colors">
            <span class="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                <i class="fas fa-globe"></i>
            </span>
            <div class="min-w-0 flex-1">
                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">{{ 'lang.website'|trans }}</p>
                <a href="{{ user.myUrl }}" target="_blank" rel="noopener" class="text-gray-900 font-medium hover:text-primary transition-colors truncate block">{{ user.myUrl }}</a>
            </div>
        </li>
        {% endif %}
        {% if user.street or user.city or user.zip %}
        <li class="flex items-start gap-4 p-4 hover:bg-gray-50/50 transition-colors">
            <span class="flex-shrink-0 w-10 h-10 rounded-lg bg-gray-200 flex items-center justify-center text-gray-600">
                <i class="fas fa-map-marker-alt"></i>
            </span>
            <div class="min-w-0 flex-1">
                <p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">{{ 'lang.address'|trans }}</p>
                <p class="text-gray-900 font-medium">
                    {% if user.street %}{{ user.street }}<br>{% endif %}
                    {% if user.zip or user.city %}{{ user.zip }} {{ user.city }}{% endif %}
                    {% if user.country %}<br>{{ user.country|getCountry }}{% endif %}
                </p>
                {% if maps_pre_link is defined and maps_pre_link %}
                    <a href="{{ maps_pre_link }}" target="_blank" rel="noopener" class="inline-flex items-center gap-1 mt-2 text-sm text-primary hover:text-primary-light font-medium">
                        <i class="fab fa-google text-xs"></i> Google Maps
                    </a>
                {% endif %}
            </div>
        </li>
        {% endif %}
    </ul>
</div>