<script lang="ts">
    import { apiBaseURL } from "../../../config"
    import { mediaLibrary, pages, rerender } from "../../store"
    import { navigate } from "svelte-routing/src/history"

    export let pageId: string
    export let persons: Page[]
    persons = persons.sort((a, b) => a.sort - b.sort)

    let hover = -1
</script>

<div class="persons">
    {#each persons as p, i}
        <button
            class="person"
            on:click="{() => {
                $rerender = $rerender + 1
                navigate(p.path)
            }}"
        >
            <div class="image" on:mouseover="{() => (hover = i)}" on:focus on:blur on:mouseout="{() => (hover = -1)}">
                <!-- Initial Image -->
                <img
                    class="initial"
                    src="{`${apiBaseURL}medialib/${p?.personPreview?.initialImage}/${
                        $mediaLibrary[p?.personPreview?.initialImage]?.file?.src
                    }`}"
                    style="opacity: {hover == i ? 0 : 1}"
                    alt="{$mediaLibrary[p?.personPreview?.initialImage]?.alt || ''}"
                    title="{$mediaLibrary[p?.personPreview?.initialImage]?.title || ''}"
                />
                <!-- Hover Image -->
                <img
                    class="hover"
                    src="{`${apiBaseURL}medialib/${p?.personPreview?.hoverImage}/${
                        $mediaLibrary[p?.personPreview?.hoverImage]?.file?.src
                    }`}"
                    style="opacity: {hover == i ? 1 : 0}"
                    alt="{$mediaLibrary[p?.personPreview?.hoverImage]?.alt || ''}"
                    title="{$mediaLibrary[p?.personPreview?.hoverImage]?.title || ''}"
                />
            </div>
            <div class="text">
                {p?.personPreview?.name}
            </div>
        </button>
    {/each}
</div>

<style lang="less">
    @import "../../assets/css/main.less";
    .persons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        @media @tablet {
            gap: 80px;
        }
        .person {
            cursor: pointer;
            @media @tablet {
                margin: 40px 0px;
            }
            display: flex;
            flex-direction: column;
            .image {
                width: 290px;
                height: 368px;
                position: relative;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    position: absolute;
                    top: 0;
                    left: 0;
                    transition: opacity 0.3s;
                }
            }
            .text {
                width: 100%;
                background-color: @signal-color;
                color: @font-color-secondary;
                padding: 2px 15px;
                font-weight: bold;
            }
        }
    }
</style>
