{% extends 'dev/master.twig' %}

{% set header_title = 'flash.moe / contact' %}

{% block container %}
    <div class="section">
        <div class="section-content">
            <div class="section-background"></div>
            <h1>Contact</h1>
        </div>
    </div>
    <div class="socials">
        {% for contact in contacts %}
            <div class="social social-{{ contact.name }}" style="--social-colour: {{ contact.colour }}">
                {% if contact.hasLink %}
                    <a href="{{ contact.link }}" class="social-background" target="_blank" rel="noopener"></a>
                {% else %}
                    <div class="social-background" onclick="fm.selectTextInElement(this.parentNode.querySelector('.social-handle')); fm.copySelectedText();"></div>
                {% endif %}

                <div class="social-icon {{ contact.icon }}"></div>
                <div class="social-content">
                    <div class="social-name">{{ contact.title }}</div>
                    <div class="social-handle">{{ contact.display }}</div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}