<template>
  <div class="card-listing">
    <component-listing
      id="centers-listing"
      endpoint="content/manager_spaces_tools"
      direction="vertical"
      :fractions="2"
      :pagination="false"
    >
      <template #default="{ item }">
        <Link :href="item.tools_link" :icon="null">
          <CardImageWithEdition
            :key="item.uuid"
            :image="$_getContentImage(item.image, 'image-card')"
            :card-overlay-enabled="true"
            tag="h3"
            class="card-manager-space"
            v-bind="item"
          />
        </Link>
      </template>
    </component-listing>
  </div>
</template>

<script>
import { Link, CardImage } from 'inside-collection/components'

import { withEdition } from '@inside-edition/hocs'

import checkManagerAccess from '../../mixins/check-manager-access'

export default {
  name: 'ManagerToolsListing',
  components: {
    Link,
    CardImageWithEdition: withEdition(CardImage)
  },
  mixins: [checkManagerAccess],
  beforeMount() {
    if (!this.$_checkManagerAccess) {
      this.$router.push({ name: 'HomePage' })
    }
  }
}
</script>

<style lang="scss">
.card-listing {
  .card-manager-space {
    width: 100%;
  }
}
</style>
