<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>
            <div class="w-100 d-flex justify-center">
                <v-table class="text-h5 w-66">
                    <tbody>
                    <tr v-for="schedule in schedules">
                        <td>{{ parseDate(schedule.current_date) }} {{ schedule.weekday_name }} {{ schedule.stream_time }}</td>
                        <td>{{ schedule.name }}</td>
                    </tr>
                    </tbody>
                </v-table>
            </div>
            <p class="text-h3 ma-5">Ссылочки</p>
            <div class="w-100 d-flex justify-center">
                <v-list class="w-66">
                    <v-list-item class="ma-5" style="background-color: #1976D2; color: #FFFFFF" elevation="6" v-for="link in links" :href="link.link">
                        <template v-slot:prepend>
                            <v-avatar :image="link.image" rounded="0"></v-avatar>
                        </template>
                        <v-list-item-title>{{ link.link_name }}</v-list-item-title>
                    </v-list-item>
                </v-list>
            </div>
            <!--

            -->
        </v-sheet>
    </v-sheet>
</template>

<script>
import axios from "axios";

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