<template>
    <!-- bottom button nav -->
    <div class="fixed-bottom p-1 pt-2 pl-2 pr-2 border-top text-center d-lg-none" style="background: white">
        <div class="d-flex flex-row justify-content-around">
            <div class="flex-column" v-if="show_button_1">
                <slot name="button_1">
                    <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_search')">
                        <i class="fas fa-fw fa-book " style="font-size: 1.5em"></i><br/><small>{{ $t('Recipes') }}</small></a> <!-- TODO localize -->
                </slot>

            </div>
            <div class="flex-column" v-if="show_button_2">
                <slot name="button_2">
                    <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_plan')">
                        <i class="fas fa-calendar-alt" style="font-size: 1.5em"></i><br/><small>{{ $t('Meal_Plan') }}</small></a>
                </slot>

            </div>
            <div class="flex-column" v-if="show_button_create">
                <slot name="button_create">
                    <div class="dropup">
                        <a class="nav-link bottom-nav-link p-0" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus-circle fa-2x bottom-nav-link"></i>
                        </a>
                        <div class="dropdown-menu center-dropup" aria-labelledby="navbarDropdownMenuLink">

                            <a class="dropdown-item" v-bind:href="resolveDjangoUrl('new_recipe')"><i
                                class="fas fa-fw fa-plus"></i> {{ $t('Create Recipe') }}</a>
                            <a class="dropdown-item" v-bind:href="resolveDjangoUrl('data_import_url')"><i
                                class="fas fa-fw fa-file-import"></i> {{ $t('Import Recipe') }}</a>
                            <div class="dropdown-divider" v-if="create_links.length > 0"></div>

                            <slot name="custom_create_functions">

                            </slot>

                            <a class="dropdown-item" v-bind:href="cl.url" v-for="cl in create_links" v-bind:key="cl.label">
                                <i :class="cl.icon + ' fa-fw'"></i> {{ cl.label }}
                            </a>
                        </div>


                    </div>
                </slot>

            </div>
            <div class="flex-column" v-if="show_button_3">
                <slot name="button_3">
                    <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_shopping')">
                        <i class="fas fa-shopping-cart" style="font-size: 1.5em"></i><br/><small>{{ $t('Shopping_list') }}</small></a>
                </slot>
            </div>
            <div class="flex-column">

                <slot name="button_4" v-if="show_button_4">
                    <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_books')">
                        <i class="fas fa-book-open" style="font-size: 1.5em"></i><br/><small>{{ $t('Books') }}</small></a> <!-- TODO localize -->
                </slot>

            </div>
        </div>

    </div>
</template>

<script>
import {ResolveUrlMixin} from "@/utils/utils";

export default {
    name: "BottomNavigationBar",
    mixins: [ResolveUrlMixin],
    props: {
        create_links: {
            type: Array, default() {
                return []
            }
        },
        show_button_1: {type: Boolean, default: true},
        show_button_2: {type: Boolean, default: true},
        show_button_3: {type: Boolean, default: true},
        show_button_4: {type: Boolean, default: true},
        show_button_create: {type: Boolean, default: true},
    }
}
</script>

<style scoped>

.bottom-nav-link {
    color: #666666
}

.center-dropup {
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
</style>