<template>
    <v-sheet
        width="100%"
        class="transparent d-flex align-center justify-space-between"
    >
        <v-sheet
            class="transparent"
        >
            <v-img 
                :src="app.url + 'imgs/layout/logo.png'"
                height="36"
                contain
                position="left center"
            />
        </v-sheet>

        
        <v-sheet
            class="transparent"
            v-if="!! app.menus.Footer && (app.menus.Footer.optionsCount > 0)"
        >
            <template v-if="$width > 620">
                <footer-btn
                    v-for="(item, index) in app.menus.Footer.getOptions"
                    :key="'item-' + index"
                    :item="item"
                />
            </template>

            <template v-else>
                <popup-menu 
                    :item="app.menus.Footer"
                />
            </template>
        </v-sheet>
    </v-sheet>
</template>

<script>
    export default {
        props: {
            app: {required: true},
        },

        components: {
            FooterBtn: require('./Item/FooterBtn').default,
            PopupMenu: require('@CsVueComp/menus/popupmenu/PopupMenu').default,
        },
        
        name: 'MydpoFooter',
    }
</script>