<template>
  <div class="post">
    <div class="card">
      <div class="card-content">
        <div class="media">
          <div class="media-content">
            <p class="title is-4">{{post.Thread.name | truncateMid(50)}}</p>
            <p class="subtitle is-6">{{username}}</p>
          </div>
        </div>
      </div>
      <div class="content">
        <div tabindex='-1'
             class='post__content'
             v-html='postContentHTML'
             @mouseup='setShowQuote'
             @blur='showQuote = false'
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ThreadPost',
  props: [
    'post',
    'highlight',
    'showReply',
    'showThread',
    'showSelect',
    'clickForPost',
    'allowQuote'
  ],
  data() {
    let post = this.post

    return {
      hover: false,
      showShareModal: false,
      showReportPostModal: false,
      postURL: `${location.origin}/p/${post.id}`,
      selected: false,

      showQuote: false,
      quoteX: 0,
      quoteY: 0,
      quoteSelection: '',

      postContentHTML: post.content
    }
  },
  computed: {
    username () {
      if(this.post.User) {
        return this.post.User.username
      } else {
        return '[deleted]'}
    },
    showActions () {
      return this.hover || this.showShareModal || this.showReportPostModal
    }
  },
  mounted () {
    this.$linkExpander(this.post.content, v => this.postContentHTML = v);
  }
}
</script>