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

    const LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et \
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu \
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia \
                deserunt mollit anim id est laborum."

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

    const clickNotify = () => {
        Notify.create({
            message: 'You clicked the little click button!',
            color: 'info'
        })
    }
</script>

<template>
    <q-page
        padding
        class="q-pa-md row justify-center"
    >
        <q-card flat class="column col-9 transparent ">
            <div class="col-1"></div>
            <q-carousel
                v-model="slide"
                transition-prev="jump-right"
                transition-next="jump-left"
                swipeable
                animated
                control-color="accent"
                navigation-icon="radio_button_unchecked"
                navigation
                class="col-5 bg-dark rounded-15 shadow-2"
            >
                <q-carousel-slide
                    name="welcome"
                    class="column no-wrap flex-center q-pa-none q-pb-xl"
                >
                    <q-img src="src/assets/line-truck-1.jpg" class="full-height">
                        <div class="absolute-bottom text-h5">
                            Welcome to App Targo!
                        </div>
                    </q-img>
                    <div class="q-mt-md text-center">
                        {{ LOREM_IPSUM }}
                    </div>
                </q-carousel-slide>
                <q-carousel-slide
                    name="tv"
                    class="column no-wrap flex-center q-pa-none q-pb-xl"
                >
                    <q-icon
                        name="live_tv"
                        size="56px"
                    />
                    <div class="q-mt-md text-center">
                        {{ LOREM_IPSUM }}
                    </div>
                </q-carousel-slide>
                <q-carousel-slide
                    name="layers"
                    class="column no-wrap flex-center q-pa-none q-pb-xl"
                >
                    <q-icon
                        name="layers"
                        size="56px"
                    />
                    <div class="q-mt-md text-center">
                        {{ LOREM_IPSUM }}
                    </div>
                </q-carousel-slide>
                <q-carousel-slide
                    name="map"
                    class="column no-wrap flex-center q-pa-none q-pb-xl"
                >
                    <q-icon
                        name="terrain"
                        size="56px"
                    />
                    <div class="q-mt-md text-center">
                        {{ LOREM_IPSUM }}
                    </div>
                </q-carousel-slide>
            </q-carousel>
            <div class="col column flex-center">
                <q-btn
                    push
                    color="accent"
                    label="Click Me"
                    @click="clickNotify"
                />
            </div>
        </q-card>
    </q-page>
</template>