<script>

import {ref} from "vue";
import {useServicesList} from "../../stores/services_list.js";

export default {
    name: "ServicesLinks",
    data: () => ({
        links: ref([]),
        servicesListStore: useServicesList(),
        fetching: true
    }),
    mounted() {
        this.fetching = true;
        this.servicesListStore.getList().then(()=>{
            this.links = this.servicesListStore.links;
            this.fetching = false;
        });
    }
}
</script>

<template>
    <v-app>
        <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
            <v-sheet class="bg-grey-darken-3 mt-5 mb-5 rounded-lg w-75 pl-3">
                <p class="text-h3 text-center pt-3">Список сервисов и страниц</p>
                <v-skeleton-loader v-if="fetching"/>
                <div class="pt-5 h-100" v-else>
                    <v-row class="ma-0" v-for="n in Math.ceil(links.length / 3)">
                        <v-col class="d-flex justify-center align-center" v-for="j in 3">
                            <v-btn v-if="links[(n - 1) * 3 + j - 1]" class="w-100 h-100 pa-5 text-white" style="background-color: #E08E79" :href="links[(n - 1) * 3 + j - 1].link" target="_blank">
                                {{ links[(n - 1) * 3 + j - 1].name }}
                            </v-btn>
                        </v-col>
                    </v-row>
                </div>
            </v-sheet>
        </v-sheet>
    </v-app>
</template>

<style scoped>
.bg-gradient {
    --s: 50px; /* control the size */

    --c: #E08E79 0 25%,#774F38 0 50%,#0000 0;
    background:
        conic-gradient(from 180deg,var(--c))
        0/var(--s) var(--s),
        repeating-conic-gradient(from 90deg,var(--c))
        0/calc(3*var(--s)) calc(3*var(--s))
}
</style>
