<template>
  <Card class="project-news-card-container">
    <div class="project-news-card-header mb-s">
      <BaseText :color="$_theme('colorTextLight')" class="mr-xs">
        {{ $_formatDate(published_at, 'L') }}
      </BaseText>

      <div v-for="subsidiary in subsidiaries.data" :key="subsidiary.uuid">
        <Link
          :href="listingFormattedHref(subsidiary.uuid, subsidiary.content_type)"
          :inline="false"
        >
          <BaseText
            :color="$_theme('colorPrimary')"
            class="subsidiary-link ml-s"
          >
            {{ subsidiary.title }}
          </BaseText>
        </Link>
      </div>
    </div>

    <Link :href="uri" :external="true" :inline="false">
      <ratio-image-ui :static="true" :src="image_link" />
    </Link>

    <Link :href="uri" :external="true" :inline="false">
      <Title :html="true" tag="h5" class="my-s">{{ title }}</Title>
    </Link>
  </Card>
</template>

<script>
import Card from '../sub-components/Card'

import { formatHref } from '@inside-library/helpers/Langs'

import { BaseText, Title } from 'inside-collection/atoms'
import { Link } from 'inside-collection/components'

export default {
  name: 'ProjectNewsCard',
  components: { Card, Title, BaseText, Link },
  props: {
    title: {
      type: String,
      required: true
    },
    published_at: {
      type: Number,
      required: true
    },
    image_link: {
      type: String
    },
    subsidiaries: {
      type: Object
    },
    uri: {
      type: String
    }
  },
  methods: {
    listingFormattedHref(uuid) {
      return formatHref(
        {
          name: 'ProjectNewsListingPage',
          query: { subsidiaries: uuid }
        },
        this.$_currentLang
      )
    }
  }
}
</script>

<style lang="scss">
.project-news-card-container {
  min-height: 280px;
  width: 31%;

  .project-news-card-header {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
