<template>
    <v-card class="bg-gradient" style="height: 100%">
        <v-card-text class="d-flex justify-center align-center">
            <v-card class="align-center justify-center h-auto w-33">
                <v-card-title>Вставьте ссылку:</v-card-title>
                <v-card-text class="justify-center">
                    <v-text-field v-model="url" label="Ссылка"/>
                    <v-btn @click="startDownload">Найти</v-btn>
                    <v-btn>Скачать</v-btn>
                </v-card-text>
            </v-card>
        </v-card-text>
    </v-card>
</template>

<script>
import {ref} from "vue";
import axios from "axios";

export default {
    name: "Main",
    data: () => ({
        url: ref(''),
	fetching: ref(false)
    }),
    methods: {
        startDownload(){
            this.fetching = true;
            axios.get(`/download_api?videourl=${this.url}`).then((responce)=>{
                this.fetching = false;
                console.log(responce);
            })
        }
    }
}
</script>


<style scoped>

.bg-gradient {
    background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

</style>
