<script setup>
import { ref } from 'vue';
const slide = ref('style');
const slideText = 'Description text';
</script>

<template>
    <q-page class="q-pa-md">
        <q-banner
            v-if="$q.screen.gt.xs"
            inline-actions
            rounded
            class="bg-orange text-white q-mb-lg"
        >
            You have lost connection to the internet. This app is offline.
            <template #action>
                <q-btn flat label="Turn ON Wifi" />
                <q-btn flat label="Dismiss" />
            </template>
        </q-banner>

        <div class="row items-start wrap q-col-gutter-md q-mb-lg">
            <div class="col-12 col-md">
                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
                <q-carousel
                    v-model="slide"
                    transition-prev="scale"
                    transition-next="scale"
                    swipeable
                    animated
                    control-color="white"
                    navigation
                    padding
                    arrows
                    height="300px"
                    class="bg-orange-3 text-white shadow-1 rounded-borders"
                >
                    <q-carousel-slide name="style" class="column no-wrap flex-center">
                        <q-icon name="style" size="56px" />
                        <div class="q-mt-md text-center">{{ slideText }}</div>
                    </q-carousel-slide>
                    <q-carousel-slide name="tv" class="column no-wrap flex-center">
                        <q-icon name="live_tv" size="56px" />
                        <div class="q-mt-md text-center">{{ slideText }}</div>
                    </q-carousel-slide>
                    <q-carousel-slide name="layers" class="column no-wrap flex-center">
                        <q-icon name="layers" size="56px" />
                        <div class="q-mt-md text-center">{{ slideText }}</div>
                    </q-carousel-slide>
                    <q-carousel-slide name="map" class="column no-wrap flex-center">
                        <q-icon name="terrain" size="56px" />
                        <div class="q-mt-md text-center">{{ slideText }}</div>
                    </q-carousel-slide>
                </q-carousel>
            </div>
            <div class="col-12 col-md">
                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
                <q-card class="q-pa-md">Dashboard page..</q-card>
            </div>
            <div class="col-12 col-md">
                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
                <q-card class="q-pa-md">Dashboard page..</q-card>
            </div>
        </div>
        <div class="row items-start q-col-gutter-md q-mb-lg">
            <div class="col-12 col-md">
                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
                <q-card class="q-pa-md">Dashboard page..</q-card>
            </div>
            <div class="col-12 col-md">
                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
                <q-card class="q-pa-md">Dashboard page..</q-card>
            </div>
        </div>

        <div class="row items-start q-col-gutter-md q-mb-lg">
            <div class="col">
                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
                <q-card class="q-pa-md">Dashboard page..</q-card>
            </div>
        </div>
    </q-page>
</template>

<style lang="scss" scoped></style>
