<template>
  <div class="flex ui-gap-sm q-pa-lg">
    <selected-managers-item
      v-for="manager in managers"
      @unsubscribe-manager="unsubscribeManager"
      :key="manager.id"
      :manager="manager"
    />
    <div
      v-if="$slots.default"
      class="full-width"
      :class="{ 'q-mt-md': managers.length }"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { Manager } from '@/types/Manager'
import SelectedManagersItem from '@/widgets/base/components/managers-select/SelectedManagersItem.vue'

@Component({
  components: { SelectedManagersItem },
})
export default class SelectedManagers extends Vue {
  @Prop({ type: Array, required: true })
  managers!: Manager[]

  @Emit()
  unsubscribeManager(manager: Manager) {
    return manager
  }
}
</script>
