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

    let selectedIndex: number = $state(0);
</script>

<svelte:head>
    <title>Drawing Gallery | denizk0461</title>
</svelte:head>

<Content>
    <Banner2
        title="Drawing Gallery"
        banner="banner.webp"
        bannerAlt="Mirror picture of me, pixelated beyond recognition"
        subtitle="minor things I have worked on"
        />
    
    <div class="selected-container">
        <img
            class="selected-img"
            src={drawings[selectedIndex].src}
            alt={drawings[selectedIndex].alt}
        />
        
        <div class="selected-text-container">
            <p class="selected-date">from {drawings[selectedIndex].date}</p>
            {#each drawings[selectedIndex].desc as d}
                <p>{@html d}</p>
            {/each}
        </div>
    </div>

    <hr>

    <div class="img-button-container">
        {#each drawings as d, index}
            <button class="img-button" onclick={() => selectedIndex = index}>
                <img src={d.src} alt={d.alt} loading="lazy" />
            </button>
        {/each}
    </div>

</Content>

<style>
    .selected-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .selected-img {
        object-fit: cover;
        width: 100%;
        height: 400px;
        max-height: initial;
    }

    .selected-text-container {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .selected-date {
        font-size: 1.0rem;
        font-weight: 600;
        font-style: italic;
    }

    .selected-text-container * {
        margin: 0;
    }

    .img-button-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 8px;
    }

    .img-button {
        cursor: pointer;
        width: 100%;
        overflow: hidden;
    }

    .img-button img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        transition: scale var(--duration-animation) var(--anim-curve);
    }
    .img-button:hover img {
        scale: 1.16;
    }
    .img-button:active img {
        scale: 1.1;
    }
</style>