{% extends 'index/base.html.twig' %}

{% block indexContent %}
    <div class="staff-promos">
        {% for promo in promos %}
            <div class="staff-promo" style="background-image: url({{ asset('uploads/promo/' ~ promo.imagePath) }});">
                <div class="promo-type" style="color: {{ promo.color }};">{{ promo.type }}</div>
                <div class="promo-title" style="color: {{ promo.textColor }};">{{ promo.title|raw }}</div>
                {% if promo.buttonType == 0 %}
                    {# Song #}
                    <a href="{{ path('song.detail', {songId: promo.buttonData}) }}" class="promo-button" style="background-color: {{ promo.color }};">CHECK IT OUT</a>
                {% endif %}
                {% if promo.buttonType == 2 %}
                    {# Search Query #}
                    <a href="{{ path('search.index', {q: promo.buttonData}) }}" class="promo-button" style="background-color: {{ promo.color }};">CHECK IT OUT</a>
                {% endif %}
                {% if promo.buttonType == 3 %}
                    {# External Link #}
                    <a href="{{ promo.buttonData }}" target="_blank" class="promo-button" style="background-color: {{ promo.color }};">CHECK IT OUT</a>
                {% endif %}
            </div>
        {% endfor %}
    </div>

    <div class="social-buttons">
        <a href="https://spinsha.re/discord" class="item item-discord"><i class="mdi mdi-discord"></i></a>
        <a href="https://twitter.com/WeAreSpinShare" class="item item-twitter"><i class="mdi mdi-twitter"></i></a>
        <a href="https://www.youtube.com/channel/UCh7ftpzIqlHw5p_-HXHwMBw" class="item item-youtube"><i class="mdi mdi-youtube"></i></a>
        <a href="https://twitch.tv/SpinShare" class="item item-twitch"><i class="mdi mdi-twitch"></i></a>
        <a href="https://patreon.com/spinshare" class="item item-patreon"><i class="mdi mdi-patreon"></i></a>
    </div>
{% endblock %}