<template>
	<div
		class='user_display'
		@click='$router.push("/user/" + user.username)'
	>
		<avatar-icon :user='user' size='small'></avatar-icon>
		<div class='user_display__username'>
			{{user.username}}
      <tooltips style="padding-left: 5px;">
      <b-tooltip v-if='user && user.system' class="is-success" label="This user is a system user operated by administrators that mainly run API operations.">
        <b-tag rounded class="is-success">&nbsp;SYSTEM&nbsp;<i class="fas fa-info-circle"></i></b-tag>
      </b-tooltip>
      &nbsp;
      <b-tooltip v-if='user && user.bot' class="is-info" label="This user is a bot account that can run automated API operations.">
        <b-tag rounded class="is-info">&nbsp;BOT&nbsp;<i class="fas fa-info-circle"></i></b-tag>
      </b-tooltip>
      &nbsp;
      <b-tooltip v-if='user && user.admin' class="is-danger" label="User is an official Kaverti administrator.">
        <b-tag class="is-danger" rounded>&nbsp;ADMIN&nbsp;<i class="fas fa-info-circle"></i></b-tag>
      </b-tooltip>
      &nbsp;
      <b-tooltip v-if='user && user.hidden' class="is-info" label="User is not discoverable in the user list.">
        <b-tag rounded>&nbsp;HIDDEN&nbsp;<i class="fas fa-info-circle"></i></b-tag>
      </b-tooltip>
      &nbsp;
      <b-tooltip v-if='user && user.booster' class="is-light" label="User is boosting the Kaverti Discord server.">
        <b-tag class="is-light" rounded>&nbsp;BOOSTER&nbsp;<i class="fas fa-info-circle"></i></b-tag>
      </b-tooltip>
      &nbsp;
    </tooltips>
		</div>
	</div>
</template>

<script>
	import AvatarIcon from './AvatarIcon';

	export default {
		name: 'UserDisplay',
		props: ['user'],
		components: { AvatarIcon }
	}
</script>

<style lang='scss' scoped>
	@import '../assets/scss/variables.scss';

	.user_display {
		align-items: center;
		background: #fff;
		border: thin solid $color__gray--darker;
		border-radius: 0.25rem;
		cursor: pointer;
		display: flex;
		flex-direction: row;
		margin-bottom: 1rem;
		padding: 0.25rem 0.5rem;
		transition: box-shadow 0.2s;

		&:hover {
			@extend .shadow_border--hover;
		}

		@at-root #{&}__username {
			font-size: 1.25rem;
			font-weight: 400;
			margin-left: 1rem;
		}
	}
</style>
