<template>
  <Block
    :title="$_tr('title')"
    :link="{ name: 'NewComersListingPage' }"
    :link-label="$_tr('link')"
    title-tag="h4"
    class="newcomers-spaces-container mb-xl"
  >
    <component-listing
      id="newcomers-listing"
      :static-data="newcomers"
      :pagination="false"
    >
      <template #default="{ item }">
        <Link
          ::key="item.uuid"
          :href="{ name: 'NewComersPage', params: { slug: item.slug[0] } }"
          :inline="false"
        >
          <Container
            :border="false"
            :background="true"
            :background-color="$_theme('colorGreyLight')"
            class="avatar-container"
            size="xs"
          >
            <Avatar :image="$_getContentImage(item.image, 'avatar')" />

            <div class="ml-m">
              <BaseText class="title">
                {{ item.title }}
              </BaseText>

              <BaseText v-if="isAlive(item, ['services', 'title'])">
                {{ item.services.title }}
              </BaseText>
            </div>
          </Container>
        </Link>
      </template>
    </component-listing>
  </Block>
</template>

<script>
import { Link, Container } from 'inside-collection/components'
import { Avatar, BaseText } from 'inside-collection/atoms'

import Block from '@inside-commons/components/lib/Block'

export default {
  name: 'SpaceNewcomersListing',
  $_i18nRootPath: 'customs.SPACES.newComers',
  components: { Block, Link, Avatar, BaseText, Container },
  props: {
    newcomers: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss">
.newcomers-spaces-container {
  .avatar-container {
    display: flex;
  }
}
</style>
