{% extends "base.html" %}

{% block content %}
{% for section in browse_data %}
<div class="browse-section">
    <h1>{{ section.title }}</h1>
    <div class="row row-cols-1 row-cols-md-4 row-cols-lg-6 g-4">
        {% for card in section.items %}
        <div class="col">
            <div class="card shadow h-100 d-flex flex-column position-relative" >
                <a href="/browse/page/{{ card.uri }}?provider={{provider_id}}">
                    <img src="{{ card.artwork.0.url }}" class="card-img-top" alt="{{ card.title }}">
                    <div class="card-body d-flex flex-column justify-content-between">
                        <h5 class="card-title">{{ card.title }}</h5>
                    </div>
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endfor %}
{% endblock %}
<style>
    .browse-section {
        margin: 20px 0;
    }

    .browse-section h1 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .browse-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 20px;
    }

    .browse-card {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        text-align: center;
        color: #fff;
    }

    .browse-card img {
        width: 100%;
        height: auto;
        display: block;
    }

    .browse-card .title {
        position: absolute;
        bottom: 10px;
        left: 10px;
        font-size: 18px;
        text-shadow: 1px 1px 2px #000;
    }
</style>