{% block social_medias %}
<fieldset class="mb-3">
    <h2 class="mt-4">
        Réseaux sociaux
    </h2>

    {% set social_medias = {
        'mastodon':  { 'icon': 'bi-mastodon',  'label': 'Mastodon' },
        'facebook':  { 'icon': 'bi-facebook',  'label': 'Facebook' },
        'instagram': { 'icon': 'bi-instagram', 'label': 'Instagram' },
        'tiktok':    { 'icon': 'bi-tiktok',    'label': 'TikTok' },
        'youtube':   { 'icon': 'bi-youtube',   'label': 'YouTube' },
        'linkedin':  { 'icon': 'bi-linkedin',  'label': 'LinkedIn' },
        'pinterest': { 'icon': 'bi-pinterest', 'label': 'Pinterest' },
        
        
    } %}

    <div id="social-media-tags">
        {% for key, social in social_medias %}
            {% set tag_name = 'contact:' ~ key %}
            <div class="input-group mb-2">
                <span class="input-group-text" style="width: 10rem;">
                    <i class="bi {{ social.icon }} me-2"></i>
                    {{ social.label }} 
                </span>
                <input type="text" 
                       class="form-control" 
                       id="commerce_tag_value__{{ tag_name }}" 
                       name="commerce_tag_value__{{ tag_name }}" 
                       value="{{ commerce_overpass.tags_converted[tag_name] is defined and commerce_overpass.tags_converted[tag_name] |length > 0 ? commerce_overpass.tags_converted[tag_name] : '' }}"
                       placeholder="@compte ou URL complète">
            </div>
        {% endfor %}
    </div>

{# <pre>
{{ dump(commerce_overpass.tags_converted) }}
</pre> #}
</fieldset>
{% endblock social_medias %}