<template>
    <v-toolbar
        dense
        tile
        flat
        :color="toolbar.color"
    >
        <slot name="caption">
        </slot>
        
        <div
            v-for="(button, index ) in toolbar.getOptions"
            :key="'button' + index"
            :class="!!button.caption ? 'mr-2' : 'mr-0'"
        >
            <cs-btn 
                v-if="button.optionsCount == 0"
                :icon="button.icon"
                :tooltip="button.tooltip"
                :disabled="disabled || button.disabled()"
                :color="button.color"
                :translate="translate"
                :caption="caption(button)"
                :htmlClass="button.htmlClass"
                @click="button.Click($event)"
            />

            <popup-menu 
                v-else
                :item="button" 
            />
        </div>

        <slot name="left"></slot>

        <v-spacer></v-spacer>
        
        <slot></slot>
    </v-toolbar>
</template>

<script>
    export default {
        
        props: {
            toolbar: {required: true},
            disabled: {default: false},
            translate: {default: true},
        },

        methods: {
            caption(button) {
                if(_.isFunction(button.caption))
                {
                    return button.caption();
                }
                return button.caption;
            }
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
            PopupMenu: require('@CsVueComp/menus/popupmenu/PopupMenu').default,
        },

        name: 'CsToolbar',

    }
</script>