<template>
    <div class="mosaic-modal theme-dark layout-grid-inner" @click="onClose">
        <div class="meta">
            <div v-if="item.dl?.length" class="window dl" @click.stop>
                <dl-row v-for="row in item.dl" :row="row" />
            </div>

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

                <strapi-link class="h6" v-bind="item.image_attribution" />
            </div>
        </div>

        <div class="window content" @click.stop data-lenis-prevent>
            <lenis instance="mosaic-modal">
                <button class="close mobile-only" @click="onClose">
                    Close X
                </button>

                <h1 class="title">{{ item.title }}</h1>

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

        <button class="window close desktop-only" @click="onClose">
            Close X
        </button>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const props = defineProps({ item: Object })

const router = useRouter()
const onClose = () => router.push('/')
</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);
            margin-bottom: var(--layout-margin);

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

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

            .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;
            }
            .strapi-content {
                max-width: columns(6);
                margin: auto;
            }
        }
        &.close {
            padding: desktop-vw(9px);
            border-radius: desktop-vw(16px);
            cursor: pointer;
            margin-right: auto;
            @include label;
        }
    }

    @include mobile() {
        padding: var(--layout-margin);
        height: calc(100 * var(--vh));
        grid-template-rows: auto 1fr;

        .meta {
            grid-column: 1/-1;
            grid-template-columns: 1fr 1fr;
            display: grid;
            gap: var(--layout-column-gap);
            align-items: flex-start;
        }
        .window {
            border-radius: mobile-vw(10px);

            &.dl {
                padding: mobile-vw(12px) mobile-vw(10px);
            }
            &.gif {
                .strapi-media {
                    max-width: mobile-vw(80px);
                    max-height: mobile-vw(80px);
                    margin: auto;
                }
            }
            &.content {
                grid-column: 1/-1;
                height: 100%;
                overflow: hidden;
                position: relative;

                .lenis {
                    max-height: unset;
                    height: 100%;
                    padding: mobile-vw(54px) mobile-vw(24px) mobile-vw(34px);
                }
                .strapi-media {
                    border-radius: mobile-vw(8px);
                }
                .close {
                    position: absolute;
                    top: 1em;
                    right: 1em;
                }
            }
        }
    }
}
</style>
