<script
    setup
    lang="ts"
>
    import { RouteNames } from 'src/router/router-constants';
import { ref } from 'vue';

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

<template>
    <q-carousel
        v-model="slide"
        transition-prev="jump-right"
        transition-next="jump-left"
        swipeable
        animated
        infinite
        arrows
        :autoplay="9001"
        control-color="accent"
        control-type="outline"
        class="bg-dark full-width rounded-15 shadow-18"
    >
        <!-- welcome slide -->
        <q-carousel-slide
            name="welcome"
            class="q-pa-none fit"
        >
            <div class="column fit">
                <q-img
                    src="src/assets/targo_building.png"
                    position="50% 25%"
                    fit="cover"
                    class="col-9"
                >
                    <div class="absolute-bottom text-h6 text-uppercase text-weight-light">
                        {{ $t('dashboard.carousel.welcome_title') }}
                    </div>
                </q-img>

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

        <!-- help page slide -->
        <q-carousel-slide
            name="tv"
            class="q-pa-none cursor-pointer"
            @click="$router.push(RouteNames.HELP)"
        >
            <div class="column fit">
                <q-img
                    src="src/assets/targo_help_banner.png"
                    position="50% 25%"
                    fit="none"
                    class="col-9"
                >
                    <div class="absolute-bottom text-h6 text-uppercase text-weight-light">
                        {{ $t('dashboard.carousel.help_title') }}
                    </div>
                </q-img>

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