<template>
  <Container
    :border="false"
    class="carpool-card-container"
    @click.native="handleClick"
  >
    <BaseText class="mb-s">{{ $_formatDate(published_at, 'L') }}</BaseText>

    <Title tag="h4" class="mb-s">{{ title }}</Title>

    <BaseText class="carpool-introduction">{{ introduction }}</BaseText>
  </Container>
</template>

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

export default {
  name: 'CarpoolCard',
  components: { Container, Title, BaseText },
  props: {
    title: {
      type: String,
      required: true
    },
    introduction: {
      type: String,
      required: true
    },
    uuid: {
      type: String,
      required: true
    },
    published_at: {
      type: Number
    }
  },
  methods: {
    handleClick() {
      this.triggerModal(
        'carpool',
        'fetch',
        { item: { uuid: this.uuid }, content: 'carpools' },
        {
          layout: 'right',
          size: 'm',
          transition: 'fadeInLeft'
        }
      )
    }
  }
}
</script>

<style lang="scss">
.carpool-card-container {
  cursor: pointer;
  width: 600px;
  margin: 0 auto;

  .carpool-introduction {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
