<template>

        <div class="comment-body">

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

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

        </div>

        <div class="comment-footer">

        </div>

    </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',

            'allowThread'

        ],

        data() {

            return {

                hover: false

            }

        },

        computed: {

            dateFormatted: function () {

              var date = moment(this.date); //.format("HH:mm DD/MM/YYYY");

              return date.fromNow();

            },

            commentFormatted: function(){

              return converter.makeHtml(this.comment);

            }

        }

    }

</script>

<style scoped>

.comment {

    font-size: 12px;

    border-bottom: 1px solid #ccc;

}

.comment-author {

    float: left;

    margin-right: 4px;

}

.comment-date {

}

.comment-footer {

    color: #ccc;

}

</style>