<script>
    import {ref} from "vue";
    import {useScheduleStore} from '../../stores/schedule.js';

    export default {
        name: "Links",
        data: () => ({
            links: ref(),
            fetching: true,
            scheduleStore: useScheduleStore()
        }),
        props: {
            isWide: Boolean
        },
        mounted() {
            this.scheduleStore.getLinks().then(()=>{
                this.links = this.scheduleStore.links;
                this.fetching = false;
            });
        }
    }
</script>

<template>
    <div class="w-100 d-flex justify-center">
        <v-list class="bg-transparent pt-6 pb-6 pl-5 pr-5" :class="isWide ? 'w-66' : 'w-100'">
            <v-skeleton-loader v-if="fetching" type="list-item"/>
            <v-list-item v-else class="ma-5 nice-bg-border" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" elevation="6"-->
                <template v-slot:prepend>
                    <v-avatar class="ml-4" :image="link.image" rounded="0"></v-avatar>
                </template>
                <v-list-item-title class="white-text pl-6 pb-4 pt-4">{{ link.link_name }}</v-list-item-title>
            </v-list-item>
        </v-list>
    </div>
</template>

<style scoped>

</style>
