<template>
  <article :class="articleClass">
    <a v-if="cardData.coverImage" class="post-card-image-link" :href="cardData.path">
      <!-- FIXME Background size cover -->
      <div class="post-card-image" :style="'background-image: url(' + cardData.coverImage + ')'|changeUrls"></div>
    </a>
    <div class="post-card-content">
      <a class="post-card-content-link" :href="cardData.path">
        <header class="post-card-header">
          <span
            v-if="cardData.tags"
            class="post-card-tags"
          >{{ cardData.tags[0].name.replace('-', ' ') }}</span>
          <h2 class="post-card-title">{{ cardData.title }}</h2>
        </header>
        <section class="post-card-excerpt">
          <p>{{ cardData.description | stripHTML | changeUrls | truncate(190, '...') }}</p>
        </section>
      </a>
      <footer class="post-card-meta">
        <ul class="author-list">
          <li v-for="author in cardData.authors" class="author-list-item" :key="author.slug">
            <div class="author-name-tooltip">{{ author.name }}</div>
            <a v-if="author.image" :href="'/author/' + author.slug" class="static-avatar">
              <img class="author-profile-image" :src="author.image|changeUrls" :alt="author.name" />
            </a>
            <a v-else :href="'/author/' + author.slug" class="static-avatar author-profile-image">
             <Avatar/>
            </a>
          </li>
        </ul>

        <span class="reading-time">{{ readingTime }}</span>
      </footer>
    </div>
  </article>
</template>

<script>
import Avatar from "./icons/Avatar";
import changeUrls from '../filters/changeUrls';
import { readingTime as readingTimeHelper } from '@tryghost/helpers'

export default {
  components: {
    Avatar
  },
  props: {
    cardData: Object,
    isLarge: Boolean
  },
  computed: {
    readingTime() {
      return readingTimeHelper({
        html: this.cardData.content,
        feature_image: this.cardData.coverImage
      })
    },
    articleClass() {
      let classes = ["post-card", "post"];
      if (this.cardData.fields === null) {
        classes.push("no-image");
      }
      for (var i=0;i<this.cardData.tags.length;i++) {
        var cardTagClass = "post-" + this.cardData.tags[i].slug;
        classes.push(cardTagClass);
      }
      if (this.isLarge) {
        classes.push("post-card-large");
      }
      return classes;
    }
  },
  filters: {
    truncate: (text, length, suffix) => {
      if (!text) return text
      if (text.length <= length) return text
      return text.substring(0, length) + suffix;
    },
    stripHTML: text => {
      if (!text) return text
      return text.replace(/<[^>]+>/g, '')
    },
    changeUrls: changeUrls
  }
};
</script>
