<template>
    <nb-content class="schedule">
        <nb-spinner v-if="loading" color="#673AB7"></nb-spinner>

        <nb-list v-if="!loading" v-for="object in data">
            <schedule-item
                :type="type"
                :data="object"
                :item-number="Array.prototype.indexOf.call(data, object) + 1"
                :navigation="navigation"
            />
        </nb-list>

        <nb-text
            v-if="data.length === 0"
            class="hint-text"
        >
            Как-то тут пустовато... Совсем скоро расписание будет заполнено, нужно только подождать!
        </nb-text>
    </nb-content>
</template>

<script>
    import { React } from 'react';

    import ScheduleItem from "./ScheduleItem";

    import store from "../store";

    export default {
        name: 'DailySchedule',
        components: {
            ScheduleItem
        },
        props: {
            navigation: Object,
            type: String,
            data: Array
        },
        computed: {
            loading() {
                return store.state.loading;
            }
        }
    }
</script>

<style scoped>
    .hint-text {
        margin-top: 50%;
        font-size: 18px;
        color: #4f4f4f;
        text-align: center;
    }
</style>