<template>
    <li 
        :class="{ 'current': isCurrent }"
        :aria-current="isCurrent ? 'page' : undefined"
    >
        <template v-if="!isCurrent">
            <router-link
                :to="href"
                :target="target"
                :aria-label="ariaLabel"
            >
                <slot name="content" />
            </router-link>
            <slot name="divider" />
        </template>
        <template v-else>
            <slot name="content" />
        </template>
    </li>
</template>

<script>

    export default {
        name: 'C2BreadcrumbItem',
        props: {
            isCurrent: {
                type: Boolean,
                default: false
            },
            href: {
                type: String,
                default: '',
                required: true
            },
            ariaLabel: {
                type: String,
                default: '',
                required: false
            },
            target: {
                type: String,
                default: '_self',
                validator: value => {
                    return value === '_blank' ||
                           value === '_self' ||
                           value === '_parent' ||
                           value === '_top';
                }
            }
        }
    }
</script>

<style lang="scss">
</style>
