<template>

    <div v-on:mouseover="hover = true" v-on:mouseleave="hover = false" class="comment" v-bind:class="commentClass">

        <div class="comment-body">

            <strong class="comment-author">{{ username }}</strong>

            <div class="comment-content" v-html="commentFormatted"></div>

        </div>

        <div class="comment-footer">

            <span class="comment-date">{{ dateFormatted }}</span>

        </div>

        <comment-form v-show="hover"

            v-if="allowThread && isAuthenticated"

            v-bind:annotation="annotation"

            v-bind:reply-to="id">

        </comment-form>

    </div>

</template>

<script>

    import showdown from 'showdown'

    import moment from 'moment'

    const converter = new showdown.Converter({

        simpleLineBreaks: true

    })

    export default {

        components: ['comment-form'],

        props: [

            'id',

            'level',

            'comment',

            'username',

            'email',

            'date',

            'allow-thread',

            'is-authenticated'

        ],

        data() {

            return {

                hover: false

            }

        },

        computed: {

            commentClass: function(){

              var c = [];

              if (this.level > 0) {

                c = [ "comment-thread" ]

              }

              return c;

            },

            dateFormatted: function () {

              var date = moment(this.date).locale('fr');

              return date.fromNow();

            },

            commentFormatted: function(){

              return converter.makeHtml(this.comment);

            }

        }

    }

</script>

<style scoped>

.comment {

    font-size: 12px;

    padding: 10px 0;

    border-bottom: 1px solid #ddd;

}

.comment-thread {

  border-bottom-width: 0px;

  border-left: 3px solid #ddd;

  padding-left: 10px;

  margin-left: 10px;

}

.comment-author {

    float: left;

    margin-right: 4px;

}

.comment-date {

}

.comment-footer {

    margin-top: 0px;

    color: #ccc;

}

</style>