<template>

    <div v-on:mouseover="hover = true" v-on:mouseleave="hover = false" class="comment" v-bind:style="{ marginLeft: (level * 15) + 'px' }">

        <div class="comment-body">

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

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

        </div>

        <div class="comment-footer">

            <span v-show="!hover || !allowThread" class="comment-date">{{ dateFormatted }}</span>

            <comment-form v-show="hover"

                v-if="allowThread"

                v-bind:annotation="annotation"

                v-bind:reply-to="id"></comment-form>

        </div>

    </div>

</template>

<script>

    import showdown from 'showdown'

    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 () {

            },

            commentFormatted: function(){

              return converter.makeHtml(this.comment);

            }

        }

    }

</script>

<style scoped>

.comment {

    font-size: 12px;

    padding: 5px 0;

    border-bottom: 1px solid #ccc;

}

.comment-author {

    float: left;

    margin-right: 4px;

}

.comment-date {

}

.comment-footer {

    margin-top: 5px;

    color: #ccc;

}

</style>