<script
    setup
    lang="ts"
>
    import { ref } from 'vue';

    const slide = ref<string>('welcome');
</script>

<template>
    <q-page
        padding
        class="q-pa-md justify-center items-stretch"
        :class="$q.platform.is.mobile ? 'column' : 'row'"
    >
        <!-- left column -->
        <div class="column col flex-center q-pa-md">

        </div>

        <!-- center column -->
        <div class="column col-xs-12 col-md-8 col-xl-6 flex-center q-pa-md">
            <q-carousel
                v-model="slide"
                transition-prev="jump-right"
                transition-next="jump-left"
                swipeable
                animated
                navigation
                infinite
                :autoplay="9001"
                control-color="accent"
                class="col-auto bg-dark rounded-15 shadow-18"
                :style="$q.platform.is.mobile ? 'height: 60vh;' : 'height: 50vh;'"
            >
                <!-- welcome slide -->
                <q-carousel-slide
                    name="welcome"
                    class="q-pa-none q-pb-xl fit"
                >
                    <div class="column fit">
                        <q-img
                            src="src/assets/targo_building.png"
                            height="30vh"
                            position="50% 25%"
                            fit="cover"
                            class="col-auto"
                        >
                            <div class="absolute-bottom text-h6 text-uppercase text-weight-light">
                                {{ $t('dashboard.carousel.welcome_title') }}
                            </div>
                        </q-img>

                        <div class="column col q-mt-md q-px-md flex-center">
                            <span class="col-auto">{{ $t('dashboard.carousel.welcome_message') }}</span>
                        </div>
                    </div>
                </q-carousel-slide>

                <!-- help page slide -->
                <q-carousel-slide
                    name="tv"
                    class="q-pa-none q-pb-xl"
                >
                    <div class="column fit">
                        <q-img
                            src="src/assets/targo_help_banner.png"
                            height="30vh"
                            position="50% 25%"
                            fit="none"
                            class="col-auto"
                        >
                            <div class="absolute-bottom text-h6 text-uppercase text-weight-light">
                                {{ $t('dashboard.carousel.help_title') }}
                            </div>
                        </q-img>

                        <div class="col column justify-center q-mt-md q-px-md">
                            <span class="col-auto">{{ $t('dashboard.carousel.help_message') }}</span>
                        </div>
                    </div>
                </q-carousel-slide>
            </q-carousel>

            <div class="col column">
                <span class="col-auto text-h6 text-uppercase"> </span>
            </div>
        </div>

        <!-- right column -->
        <div class="column col items-center">
            <div
                class="col-auto row full-width within-iframe"
                :class="$q.platform.is.mobile ? 'justify-center' : 'justify-end q-pl-md'"
                style="height: 50vh;"
            >
                <iframe
                    title="Environment Canada Weather"
                    height="400px"
                    src="https://weather.gc.ca/wxlink/wxlink.html?coords=45.159%2C-73.676&lang=e"
                    allowtransparency="true"
                    style="border: 0;"
                    class="col-auto"
                ></iframe>
            </div>
        </div>
    </q-page>
</template>