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

{% block indexContent %}
        <div class="song-row song-row-hot">
            <div class="song-list">
                {% for song in hotSongs %}
                    {{ include('components/song-item.html.twig', {song: song}) }}
                {% endfor %}
            </div>
            <div class="pagination">
                {% if hotOffset > 0 %}
                    <a href="{{ path('index.hot', {hotOffset: hotOffset - 1}) }}" class="button"><i class="mdi mdi-chevron-left"></i> PREVIOUS</a>
                {% else %}
                    <a class="button button-disabled"><i class="mdi mdi-chevron-left"></i> PREVIOUS</a>
                {% endif %}
                {% if hotSongs|length < 12 %}
                    <a class="button button-disabled">NEXT <i class="mdi mdi-chevron-right"></i></a>
                {% else %}
                    <a href="{{ path('index.hot', {hotOffset: hotOffset + 1}) }}" class="button">NEXT <i class="mdi mdi-chevron-right"></i></a>
                {% endif %}
            </div>
        </div>
{% endblock %}