<template>
    <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
        <v-sheet class="mt-5 mb-5 rounded-lg w-75">
            <p class="text-h3 ma-5">Расписание стримов</p>
            <p class="ma-5 text-h4">{{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
            <ScheduleTable/>
            <p class="text-h3 ma-5">Ссылочки</p>
            <Links/>
        </v-sheet>
    </v-sheet>
</template>

<script>
import axios from "axios";
import ScheduleTable from "./Schedule/ScheduleTable.vue";
import Links from "./Schedule/Links.vue";

export default {
    name: "Schedule",
    components: {Links, ScheduleTable},
    data: () => ({
        dates: []
    }),
    methods: {
        parseDate(date){
            let dateArr = date.split("-");
            return dateArr[2] + "." + dateArr[1];
        }
    },
    mounted() {
        axios
            .get('/api/v1/dates')
            .then(response => (this.dates = response.data));
    }
}
</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>
