<template>
    <!--<div class="video-wrapper">
       <video ref="video" playsinline autoplay muted @ended="handleEnded">
             <source :src="videoWebm" type="video/webm" />
            <source :src="videoMp4" type="video/mp4" /> 
            {{ videoFallbackText }}
        </video>      
    </div>-->
    <div id="page__wrapper" class="flex flex-col justify-between min-h-520">
        <div class="page__scroller">
            <h2 id="page__heading" class="text-xl font-bold leading-tight dark:text-slate-400 text-center">
                {{ 'Seamless integration with your devices.' }}
            </h2>
            <!-- <p id="page__subtitle" class="max-w-md m-auto text-center">
                {{ subtitleText }}
            </p> -->
            <div class="page__content">
                Discover the power of Tethys, the cutting-edge web backend solution that revolutionizes the way you handle
                research
                data. At the heart of Tethys lies our meticulously developed research data repository, which leverages
                state-of-the-art
                CI/CD techniques to deliver a seamless and efficient experience.
            </div>
        </div>
    </div>
</template>

<script lang="ts">
// import { generateFilePath } from '@nextcloud/router';
import CardBox from '@/Components/CardBox.vue';

export default {
    name: 'Page0',
    components: {
        CardBox
    },
    data() {
        return {
            // videoMp4: generateFilePath('firstrunwizard', 'img', 'Nextcloud.mp4'),
            // videoWebm: generateFilePath('firstrunwizard', 'img', 'Nextcloud.webm'),
        };
    },
    computed: {
        // videoFallbackText() {
        //     return 'Welcome to {cloudName}!', { cloudName: "test" };
        // },
    },

    methods: {
        handleEnded() {
            this.$emit('next');
        },
    },
};
</script>

<style scoped lang="css">
/* video {
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.video-wrapper {
    background-color: var(--color-primary-element);
}

.page {
   
   &__scroller {
       /* overflow-y: scroll; */
       margin-top: calc(var(--default-grid-baseline) * 8);
   }



   &__content {
       display: flex;
       flex-wrap: wrap;
       gap: calc(var(--default-grid-baseline) * 6);
       justify-content: center;
       margin: calc(var(--default-grid-baseline) * 10) 0;
   }
}
</style>
