<template>
    <div
        class="mosaic-modal theme-dark layout-grid-inner"
        @click="emit('close')"
    >
        <div class="meta">
            <div class="window dl" @click.stop>
                <dl-row v-for="row in item.dl" :row="row" />
            </div>

            <div class="window gif">
                <strapi-media :image="item.image" fit="contain" />

                <a
                    class="h6"
                    href="https://web.archive.org/web/20090831003020/http://geocities.com/aizalonl/"
                    target="_blank"
                    >aizaloni</a
                >
            </div>
        </div>

        <div class="window content" @click.stop data-lenis-prevent>
            <lenis instance="mosaic-modal">
                <h1 class="title">{{ item.title }}</h1>

                <strapi-map :items="item.content" mediaDS="42vw" />
            </lenis>
        </div>

        <button class="window close" @click="emit('close')">Close X</button>
    </div>
</template>

<script setup>
const props = defineProps({ item: Object })
console.log(props.item)

const emit = defineEmits(['close'])
</script>

<style lang="scss">
.mosaic-modal {
    position: fixed;
    inset: 0;
    align-items: flex-start;
    padding-top: desktop-vw(27px);

    .meta {
        grid-column: 4 / span 2;
    }

    .window {
        background: var(--theme-bg);
        color: var(--theme-fg);
        border-radius: desktop-vw(10px);

        &.dl {
            padding: desktop-vw(12px) desktop-vw(10px);
            display: flex;
            flex-direction: column;
            gap: desktop-vw(8px);

            .dl-row:first-child {
                border-top: none;
                padding-top: 0;
            }
        }
        &.gif {
            margin-top: var(--layout-margin);
            padding: 1rem;
            text-align: center;

            a {
                text-decoration: underline;
                display: block;
                margin-top: 1em;
            }
        }
        &.content {
            grid-column: 6 / span 7;

            .lenis {
                max-height: desktop-vh(950px);
                overflow: auto;
                padding: desktop-vw(34px) desktop-vw(24px);
            }
            .title {
                text-align: center;
                margin-bottom: 1em;
            }
            .strapi-media {
                border-radius: desktop-vw(4px);
                overflow: hidden;
            }
        }
        &.close {
            padding: desktop-vw(9px);
            border-radius: desktop-vw(16px);
            cursor: pointer;
            margin-right: auto;
            @include label;
        }
    }
}
</style>
