{# Карточка «Социальные сети» с ссылками #}
{# Параметры: user, compact (optional): false — меньшие отступы/кнопки при true #}
{% if user.urlLinkedIn or user.urlInstagram or user.urlFacebook or user.urlX %}
<div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
        <i class="fas fa-share-alt text-primary"></i>
        {{ 'lang.socialNetworks'|trans }}
    </h2>
    <div class="flex flex-wrap {{ compact|default(false) ? 'gap-2' : 'gap-3' }}">
        {% if user.urlLinkedIn %}
        <a href="{{ user.urlLinkedIn }}" target="_blank" rel="noopener" class="inline-flex items-center {{ compact|default(false) ? 'gap-1.5 px-3 py-1.5 text-sm' : 'gap-2 px-3 py-2 text-sm' }} rounded-lg bg-gray-100 text-gray-700 hover:bg-primary/10 hover:text-primary transition-colors">
            <i class="fab fa-linkedin text-[#0A66C2]"></i>
            LinkedIn
        </a>
        {% endif %}
        {% if user.urlInstagram %}
        <a href="{{ user.urlInstagram }}" target="_blank" rel="noopener" class="inline-flex items-center {{ compact|default(false) ? 'gap-1.5 px-3 py-1.5 text-sm' : 'gap-2 px-3 py-2 text-sm' }} rounded-lg bg-gray-100 text-gray-700 hover:bg-primary/10 hover:text-primary transition-colors">
            <i class="fab fa-instagram text-pink-500"></i>
            Instagram
        </a>
        {% endif %}
        {% if user.urlFacebook %}
        <a href="{{ user.urlFacebook }}" target="_blank" rel="noopener" class="inline-flex items-center {{ compact|default(false) ? 'gap-1.5 px-3 py-1.5 text-sm' : 'gap-2 px-3 py-2 text-sm' }} rounded-lg bg-gray-100 text-gray-700 hover:bg-primary/10 hover:text-primary transition-colors">
            <i class="fab fa-facebook text-blue-600"></i>
            Facebook
        </a>
        {% endif %}
        {% if user.urlX %}
        <a href="{{ user.urlX }}" target="_blank" rel="noopener" class="inline-flex items-center {{ compact|default(false) ? 'gap-1.5 px-3 py-1.5 text-sm' : 'gap-2 px-3 py-2 text-sm' }} rounded-lg bg-gray-100 text-gray-700 hover:bg-primary/10 hover:text-primary transition-colors">
            <i class="fab fa-x-twitter"></i>
            X
        </a>
        {% endif %}
    </div>
</div>
{% endif %}