index.hbs

---
title: Hall of Fame
layout: layout-default.hbs
---
<div class="flex text-2xl font-semibold mb-4">{{ title }}</div>
<div class="overflow-y-auto pr-4">
    {{#each ratings as |rating|}}
    <sl-rating class="inline-block py-4" max="10" value="{{rating}}" readonly></sl-rating>
    <div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4">
        {{#each ../collections.pages as |page|}}
        {{#if (eq page.data.rating rating)}}
            <a class="hover:text-pink-500" href="{{ page.url }}">
                <sl-card class="shadow-sm hover:shadow-md" style="max-width: 200px;">
                    <img
                        slot="image"
                        loading="lazy"
                        style="margin: 2px; max-width: calc(100% - 4px);"
                        src="{{ page.data.artwork }}"
                        alt="{{ page.data.title }}"
                    >

                    <div>
                        <div class="text-gray-500">{{ page.data.artist }}</div>
                        <div class="font-semibold">{{ page.data.release }}</div>
                    </div>
                </sl-card>
            </a>
        {{/if}}
        {{/each}}
    </div>
    {{/each}}
</div>