<template>
    <v-breadcrumbs :items="items">
        <template v-slot:divider>
            <v-icon>fas fa-chevron-left</v-icon>
        </template>
        <template v-slot:item="props">
            <router-link :to="{name: props.item.routeName}" class="WM-Link WM-Margin-T-5" :class="[LinkClass, props.item.disabled && 'disabled']"><v-icon>fas fa-{{ props.item.icon }}</v-icon> {{ props.item.text.toUpperCase() }}</router-link>
        </template>
    </v-breadcrumbs>
</template>

<script>
export default {
    props: {
        LinkClass:      { default: 'WM-Link-Red' },
        items:          { default: [] },
    },
};
</script>
<style scoped lang="scss">
    .WM-Link .v-icon{
        margin-bottom: 7px;
        margin-left: 5px;
    }
    .disabled {
        color: grey;
        pointer-events: none
    }
    .v-breadcrumbs li:nth-child(2n) {
        padding: 0 12px 0 30px;
    }
    .v-breadcrumbs .WM-Link {
        font-size: 14px;
    }
</style>
