<template>
  <article class="comment">
    <div class="avatar">
      <figure class="image is-48x48" v-if="comment.actor.avatar">
        <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
      </figure>
      <b-icon v-else size="is-medium" icon="account-circle" />
    </div>
    <div class="body">
      <div class="meta">
        <div class="name">
          <span>@{{ comment.actor.preferredUsername }}</span>
        </div>
        <div class="post-infos">
          <span :title="comment.insertedAt | formatDateTimeString">
            {{ $timeAgo.format(comment.insertedAt, "twitter") || $t("Right now") }}</span
          >
        </div>
      </div>
      <div class="description-content" v-html="comment.text"></div>
    </div>
  </article>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { IComment, CommentModel } from "../../types/comment.model";

@Component
export default class DiscussionComment extends Vue {
  @Prop({ required: true, type: Object }) comment!: IComment;
}
</script>
<style lang="scss" scoped>
@import "@/variables.scss";

article.comment {
  display: flex;
  border-top: 1px solid #e9e9e9;

  div.body {
    flex: 2;
    margin-bottom: 2rem;
    padding-top: 1rem;

    .meta {
      display: flex;
      align-items: center;
      padding: 0 1rem 0.3em;

      .name {
        margin-right: auto;
        flex: 1 1 auto;
        overflow: hidden;

        span {
          color: #3c376e;
        }
      }
    }

    div.description-content {
      padding: 0 1rem 0.3rem;

      /deep/ h1 {
        font-size: 2rem;
      }

      /deep/ h2 {
        font-size: 1.5rem;
      }

      /deep/ h3 {
        font-size: 1.25rem;
      }

      /deep/ ul {
        list-style-type: disc;
      }

      /deep/ li {
        margin: 10px auto 10px 2rem;
      }

      /deep/ blockquote {
        border-left: 0.2em solid #333;
        display: block;
        padding-left: 1em;
      }

      /deep/ p {
        margin: 10px auto;

        a {
          display: inline-block;
          padding: 0.3rem;
          background: $secondary;
          color: #111;

          &:empty {
            display: none;
          }
        }
      }
    }
  }

  div.avatar {
    padding-top: 1rem;
    flex: 0;
  }
}
</style>
