<script lang="ts">
    import Content from "$lib/viewport/content.svelte";
    import Banner2 from "$lib/banner2.svelte";
    import { type Record, records } from "./records";

    function openLink(link: string) {
        window.open(link);
    }
</script>

<svelte:head>
    <title>Record Wall | denizk0461</title> 
</svelte:head>

{#snippet recordCover({ record }: { record: Record })}
    <button class="record-gallery-container" on:click={(event) => openLink(record.link)}>
        <img class="record-gallery-cover" src="{record.cover}" alt="Cover for {record.title} by {record.artist}">
    </button>
{/snippet}

<Content>
    <Banner2
        title="Record Wall" />

    <div class="record-gallery">
        {#each records as record}
            {@render recordCover({ record })}
        {/each}
    </div>
</Content>

<style>
    .record-gallery {
        display: flex;
        flex-wrap: wrap;
    }

    .record-gallery-container {
        display: flex;
        width: 20%;
        box-sizing: border-box;
        border: none;
        padding: 0;
    }
    .record-gallery-container:hover {
        background-color: transparent;
    }
    .record-gallery-container:hover .record-gallery-cover {
        margin: 0;
    }

    .record-gallery-cover {
        width: 100%;
        margin: 8px;
        transition: margin 0.1s ease-out;
    }
</style>