<template>
  <q-item v-on="$listeners" v-bind="$attrs" class="q-px-md" clickable v-ripple>
    <q-item-section side>
      <ui-user-avatar :user="manager" size="32px" />
    </q-item-section>
    <q-item-section>
      <q-item-label lines="1">{{ manager | userFullName }}</q-item-label>
    </q-item-section>
  </q-item>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Manager } from '@/types/Manager'
import UiUserAvatar from '@/lib-components/UiUserAvatar.vue'
import UiListItem from '@/lib-components/UiListItem.vue'
import { QItem, QItemLabel, QItemSection, Ripple } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { UiListItem, UiUserAvatar, QItem, QItemSection, QItemLabel },
  directives: { Ripple },
})
export default class ManagersListItem extends Vue {
  @Prop({ type: Object, required: true })
  manager!: Manager
}
</script>
