<template>
    <div v-if="!isAdmin" class="container-fluid p-5 bg-gradient-secondary" style="height: 100vh;">
            <div class="text-center">
                <h4 class="text-dark mb-4 ">{{ entityExists? 'Biller Entity Selector' : 'You have no "Entities", please create one!' }}</h4>
            </div>
            <div v-if="entityExists" class="bg-dark bg-gradient-dark p-5 rounded rounded-4 user col-md-3 col-sm-10 mx-auto shadow" >
                <!-- <float-select formClass="p-0 m-0 col-4" :options="entityOptions" v-model="entity"  :ogDataSrc="entityID"
                                                label="Active Entity" label-class="text-light fw-bold" option-class="bg-primary-subtle bg-gradient"/>
                -->
                <select class="form-select form-select-sm" aria-label="Entity Selector" :value="entityID" @change="$store.commit('setEntity', Number($event.target.value))">
                    <option v-if="entityID<1" selected>Select Entity</option>
                    <option  v-for="o,i in entityOptions" :key="i" :value="o.id">{{ o.name }}</option>
                </select>
                
            </div>
            <entity-view v-else :disposable="true">
            </entity-view>
            
    </div>
    <div v-else></div>
</template>

<script>

import EntityView from '@/views/EntityView.vue';

export default {
    components:{
        EntityView
    },
    computed:{
            entityOptions(){
                return this.$store.getters.getUser.entities;
            },
            entityID(){
                return this.$store.getters.getEntity;
            },
            entityExists(){
                return this.$store.getters.getUser.entities.length>0;
            },
            isAdmin(){
                return this.$store.getters.isAdmin;
            },
        }
}
</script>