<template>
    <v-app style="background-color: #ffffff;">
        <Navigations
            :nav_elements="nav_elements"
            v-show="!loading"
        />
        <v-layout
            row
            style="margin-top: 1%; margin-left: 8%; margin-right: 8%"
            v-show="!loading"
        >
            <v-container
                class="custom-app-containers justify-center text-left display-1"
            >
                <b>{{ title }}</b>
            </v-container>
            <v-flex
                md3
                v-for="course in courses"
                :key="course.id"
            >
                <CourseCards :course="course"/>
            </v-flex>
        </v-layout>
        <Loading
            class="text-center"
            v-show="loading"
        />
        <Help
            :show="politics_show"
        />
    </v-app>
</template>

<script>
    import CourseCards from "../components/courses/Card";
    import Loading from "../components/Loading";
    import CoursesValidators from "../plugins/validators/courses";
    import Navigations from "../components/Navigations";
    import logger from '../plugins/logger';
    import Help from "../components/courses/Help";
    export default {
        name: 'Courses',
        components: {Help, Loading, CourseCards, Navigations },
        created: async function () {
            this.politics_show = false;
            this.loading = true;
            this.courses = await this.$store.dispatch('getCourses');
            if (this.courses.length === 0) {
                window.location.href = 'https://fless.pro';
                // Если сюда добавить this.loading = false;, то будет ощущение лагов (для отладки)
                return;
            }
            try {
                CoursesValidators.multiplyCourseValidator(this.courses);
            } catch (e) {
                logger.fatalComponent(this, e);
                await this.$router.push('/checking');
            }
            this.loading = false;
        },
        data: () => ({
            title: 'Your courses',
            loading: true,
            courses: [],
            politics_show: null,
            nav_elements: [
                {
                    'icon': 'mdi-account',
                    'to': '/account',
                },
                {
                    'icon': 'mdi-exit-run',
                    'to': '/login',
                },
                {
                    'icon': 'mdi-alert-circle',
                    'to': '/courses',
                    'middleware': () => { this.politics_show = true; },
                },
            ],
        }),
    };
</script>

<style>
    @import "../assets/css/app.css";
</style>