<script
    setup
    lang="ts"
>
    import MainCarousel from 'src/modules/dashboard/components/main-carousel.vue';
    import ShortcutCard from 'src/modules/dashboard/components/employee/shortcut-card.vue';
</script>

<template>
    <q-page
        padding
        class="q-pa-md justify-center items-stretch bg-secondary"
        :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 items-center q-pa-md">
            <div class="col-auto full-width q-py-md">
                <MainCarousel />
            </div>

            <span class="col-auto text-uppercase text-weight-bold self-start q-pt-md">{{ $t('dashboard.useful_links') }}</span>

            <div class="col row full-width justify-evenly items-start q-py-md">
                <div class="col-3 q-pa-sm">
                    <ShortcutCard 
                        image-source="src/assets/google_thumbnail.png"
                        title="Google Workspace"
                        route="https://mail.google.com/mail/u/0/#inbox"
                    />
                </div>

                <div class="col-3 q-pa-sm">
                    <ShortcutCard 
                        image-source="src/assets/facturation_thumbnail.png"
                        title="Facturation"
                        route="https://facturation.targo.ca/facturation/accueil.php?menu=ticket_open"
                    />
                </div>

                <div class="col-3 q-pa-sm">
                    <ShortcutCard 
                        image-source="src/assets/map_targo_banner.png"
                        title="Map Targo"
                        route="https://map.targointernet.com/infrastructure/map.php"
                    />
                </div>

                <div class="col-3 q-pa-sm">
                    <ShortcutCard 
                        image-source="src/assets/info-pannes.png"
                        title="Info Pannes"
                        route="https://infopannes.solutions.hydroquebec.com/info-pannes/pannes/pannes-en-cours"
                    />
                </div>
            </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=f"
                    allowtransparency="true"
                    style="border: 0;"
                    class="col-auto"
                ></iframe>
            </div>
        </div>
    </q-page>
</template>