<template>
	<v-card class="px-4 py-1 caption">
		<v-row
			dense
			align="center" justify="center"
			class="text-center ma-0"
		>	
			<v-col
				v-if="menu.length > 0" 
				cols="12"
				class="absolute text-right" style="top: 0"
			>
				<v-menu
					bottom left
					nudge-bottom="25px"
				>
					<template #activator="{ on, attrs }">
						<v-btn
							icon small
							v-bind="attrs"
							v-on="on"
						>
							<v-icon small>mdi-dots-vertical</v-icon>
						</v-btn>
					</template>
					<v-list dense>
						<v-list-item-group>
							<v-list-item
								v-for="(menu_item, i) in menu"
								:key="i"
								@click="menu_item.action(item)"
							>	
								<v-list-item-icon class="mr-2">
									<v-icon small :class="menu_item.class">{{ menu_item.icon }}</v-icon>
								</v-list-item-icon>
								<v-list-item-content>
									<v-list-item-title>
										<span :class="menu_item.class">{{ menu_item.title }}</span>
									</v-list-item-title>
								</v-list-item-content>
							</v-list-item>
						</v-list-item-group>
					</v-list>
				</v-menu>
			</v-col>
			<v-col cols="12">
				<v-icon size="80">mdi-account-circle</v-icon>
				<div class="primary--text body-1 no-word-wrap" :title="item.full_name">{{ item.full_name }}<sup>#{{ item.id }}</sup></div>
				<div class="grey--text">{{ item.email }}</div>
				<div class="grey--text title">
					<span :class="item.total_credit > 0 ? '' : 'error--text' ">Total Credit: {{ item.total_credit }}</span>
				</div>
			</v-col>
			<v-col cols="12">
				<div class="text-right grey--text caption">{{ $dayjs(item.created_at).format('MMM DD, YYYY') }}</div>
			</v-col>
			<!-- <v-col cols="12" class="pa-4 pt-2">
				<v-btn
					block rounded outlined
				>
					Select
				</v-btn>
			</v-col> -->
		</v-row>
	</v-card>
</template>

<script>
export default{
	props:{
		item:{
			type: Object,
			default: function(){
				return {
					id: 0,
					name: 'UserName',
					email: 'email@email.com'
				}
			}
		},
		menu:{
			type: Array,
			default: ()=>{
				return []
			}
		}
	},
	data(){
		return {
		}
	},
	created(){
	},
	methods:{
	}
}
</script>