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

{% block body %}
<div class="container">
    <h1>Browse {{ genre ? genre : 'All Genres' }}</h1>

    <h2 class="mt-5 mb-4">Filter by Genre</h2>
    <ul class="genre-list ps-0 mt-2 mb-3">
        <li class="d-inline">
            <a class="btn btn-primary btn-sm" href="{{ path('app_browse', {
                slug: 'pop'
            }) }}">Pop</a>
        </li>
        <li class="d-inline">
            <a class="btn btn-primary btn-sm" href="{{ path('app_browse', {
                slug: 'rock'
            }) }}">Rock</a>
        </li>
        <li class="d-inline">
            <a class="btn btn-primary btn-sm" href="{{ path('app_browse', {
                slug: 'heavy-metal'
            }) }}">Heavy Metal</a>
        </li>
    </ul>

    <div>
        <h2 class="mt-5">Mixes</h2>
        <div class="row">
            {% for mix in mixes %}
            <div class="col col-md-4">
                <div class="mixed-vinyl-container p-3 text-center">
                    <img src="https://via.placeholder.com/300" alt="Square placeholder img">
                    <p class="mt-2"><strong>{{ mix.title }}</strong></p>
                    <span>{{ mix.trackCount }} Tracks</span>
                    |
                    <span>{{ mix.genre }}</span>
                    |
                    <span>{{ mix.createdAt|ago }}</span>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
