<template>
    <v-layout>
        <v-flex xs12 text-xs-center mb-2>
            <v-card color="blue lighten-4">
                <v-card-text class="pb-0 pt-1">
                    <v-btn
                        v-for="tab in tabs"
                        :color="tab.code == active ? 'white' : 'grey lighten-5'"
                        class="white--text ma-0 tab-btn"
                        :class="[tab.code == active ? 'active' : '']"
                        @click="loader = 'loading3'"
                        flat
                        :key="tab.code"
                        :data="tab"
                        >
                        <v-icon left dark>{{ tab.icon }}</v-icon>
                        <h6 class="title">{{ tab.label }}</h6>
                    </v-btn>
                </v-card-text>    
            </v-card>
            
        </v-flex>
    </v-layout>
</template>

<style scoped>
.active {
    border-bottom: solid 3px #ffeb3b!important;
}

.tab-btn {
    min-width: 300px;
}
</style>

<script>
module.exports = {
    data () {
        return {
            tabs : [
                {"label":"PASIEN & DOKTER", "icon":"account_circle", "code":"01"},
                {"label":"PEMERIKSAAN", "icon":"healing", "code":"02"},
                {"label":"PEMBAYARAN", "icon":"attach_money", "code":"03"}
            ],

            active : "01"
        }
    }
}
</script>