<template>
    <div v-show="annotation">
        <label class="small text-muted">Commentaires</label>
        <div v-show="comments.length === 0" class="alert alert-info">Pas de commentaire pour le moment.</div>
        <comment
            v-for="comment in comments"
            v-bind:comment="comment.comment"
            v-bind:username="comment.user_name"
            v-bind:date="comment.submit_date"></comment>
    </div>
</template>

<script>

    import Comment from './Comment.vue'

    export default {
        props: ['annotation', 'fetch'],
        components: {
            Comment
        },
        data() {
            return {
                'comments': []
            }
        },
        computed: {
            commentsURL: function() {
                return this.fetch.replace(':annotation_guid', this.annotation.annotation_guid);
            }
        },
        watch: {
            annotation: function(annotation) {
                if (annotation) {
                    $.getJSON(this.commentsURL).then((comments) => this.comments = comments);
                } else {
                    this.comments = [];
                }
            }
        }
    }

</script>

<style scoped>
.alert {
    padding: 10px;
    font-size: 12px;
}
</style>