{% extends 'base.html' %}

{% block content %}

<div class="container py-5">

    <!-- Cabeçalho -->
    <div class="mb-4">
        <h1 class="fw-bold text-white">
            Minhas Playlists
        </h1>

        <p class="text-secondary">
            Suas músicas, seus momentos.
        </p>
    </div>


    <!-- Barra de pesquisa -->
    <form action="/playlists" method="GET" class="d-flex mb-5" role="search">

        <input
            class="form-control me-2"
            type="search"
            name="busca"
            placeholder="Pesquisar playlist..."
            value="{{ busca }}"
            aria-label="Pesquisar"
        >

        <button
            class="btn btn-primary"
            type="submit"
        >
            Pesquisar
        </button>

    </form>


    <!-- Playlists -->
    <div class="row g-4">

        {% for playlist in playlists %}

        <div class="col-6 col-md-4 col-lg-3">

            <div class="card border-0 h-100 shadow-sm">

                {% if playlist.images %}

                <img
                    src="{{ playlist.images[0].url }}"
                    class="card-img-top rounded-3 p-2"
                    alt="{{ playlist.name }}"
                    style="aspect-ratio: 1 / 1; object-fit: cover;"
                >

                {% else %}

                <div
                    class="m-2 rounded-3 d-flex align-items-center justify-content-center bg-secondary"
                    style="aspect-ratio: 1 / 1; font-size: 60px;"
                >
                </div>

                {% endif %}


                <div class="card-body">

                    <h5 class="card-title text-white fw-bold text-truncate">
                        {{ playlist.name }}
                    </h5>

                    <p class="card-text text-secondary small">
                        Playlist do Spotify
                    </p>

                    <a
                        href="/playlist/{{ playlist.id }}"
                        class="btn btn-success w-100 rounded-pill"
                    >
                        Ver músicas
                    </a>

                </div>

            </div>

        </div>

        {% else %}

        <div class="col-12 text-center">

            <h4 class="text-white">
                Nenhuma playlist encontrada
            </h4>

            <p class="text-secondary">
                Tente pesquisar por outro nome.
            </p>

        </div>

        {% endfor %}

    </div>

</div>

{% endblock content %}