<template>
    <div v-show="comments.length > 0">
        <label class="form-label">Commentaires</label>
        <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>