<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);

    let drawingsRev = drawings.toReversed();
</script>

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

<Content bannerContent={{
    title: "Drawing Gallery",
    banner: "banner.webp",
    bannerAlt: "Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper.",
    subtitle: "sketches & stuff",
}}>
    
    <div class="selected-container">
        <a class="selected-img-link" href={drawingsRev[selectedIndex].src}>
            <img
            class="selected-img"
            src={drawingsRev[selectedIndex].src}
            alt={drawingsRev[selectedIndex].alt}
        />
        </a>
        
        <div class="selected-text-container">
            <div class="selected-text-header">
                {#if drawingsRev[selectedIndex].title}
                    <p class="selected-title">{drawingsRev[selectedIndex].title}</p>
                {/if}
                <p class="selected-date">from {drawingsRev[selectedIndex].date}</p>
            </div>
            {#each drawingsRev[selectedIndex].desc as d}
                <p>{@html d}</p>
            {/each}
        </div>
    </div>

    <hr>

    <div class="img-button-container">
        {#each drawingsRev 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-link {
        width: fit-content;
        height: 400px;
        margin: 0 auto;
        overflow: hidden;
    }

    .selected-img-link:hover .selected-img {
        scale: 1.06;
    }

    .selected-img {
        object-fit: contain;
        width: 100%;
        height: 100%;
        max-height: initial;
        scale: 1.0;
        transition: scale var(--duration-animation) var(--anim-curve);
    }

    .selected-text-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow: scroll;
        padding-right: 12px;
        max-height: var(--media-height);
    }

    .selected-text-header p {
        font-weight: 600;
        font-style: italic;
    }

    .selected-title {
        font-size: 1.1rem;
    }

    .selected-date {
        font-size: 1.0rem;
    }

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

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

    .img-button {
        cursor: pointer;
        width: 100%;
        overflow: hidden;
        border-radius: var(--border-radius);
        /* filter: brightness(70%) saturate(60%); */
        outline: var(--border-style) var(--border-dash-size) transparent;
        transition: outline-color var(--duration-animation) var(--anim-curve);
    }

    .img-button img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        filter: brightness(100%) saturate(80%);
        transition: scale var(--duration-animation) var(--anim-curve),
                    filter var(--duration-animation) var(--anim-curve);
    }
    .img-button:hover img {
        scale: 1.12;
    }
    .img-button:active img {
        scale: 1.08;
    }

    .img-button-container:hover img {
        filter: brightness(70%) saturate(60%);
    }
    
    .img-button:hover {
        outline-color: var(--color-highlight);
    }

    .img-button:hover img {
        filter: brightness(100%) saturate(100%);
    }
</style>