<template>

    <div class="list-group">

        <a v-for="annotation in annotations"

            ref="annotations"

            :href="'#' + annotation.annotation_guid"

            class="list-group-item"

            v-bind:class="{ active: isActive(annotation) }">

            <h3 class="small list-group-item-heading">

                {{ annotation.title }}

            </h3>

            <p class="list-group-item-text" v-for="tag in annotation.tags">{{ tag.tag_label }}</p>

            <div class="list-group-item-footer">

              <i class="fa fa-comment"></i> {{ getCommentsCount(annotation) }}

            </div>

        </a>

    </div>

</template>

<script>

    import _ from 'lodash';

    export default {

        props: [

            'annotations',

            'annotation'

        ],

        mounted() {

            if (this.annotation) {

                this.slideToAnnotation();

            }

        },

        watch: {

            annotation: function(annotation) {

                if (annotation) {

                    this.slideToAnnotation();

                }

            }

        },

        methods: {

                e.preventDefault();

            },

            isActive: function(annotation) {

                return annotation === this.annotation;

            },

            getCommentsCount: function(annotation) {

                var commentsCount = annotation.stats.comments_count;

                return commentsCount + ' commentaire' + (commentsCount > 1 ? 's' : '');

            },

            slideToAnnotation: function() {

                var el = _.find(this.$refs.annotations, (el) => {

                    return $(el).attr('href') === ('#' + this.annotation.annotation_guid);

                });

                if (el) {

                    var $container = $(this.$el.closest('.panel'));

                    $container.animate({

                        scrollTop: $container.scrollTop() - $container.offset().top + $(el).offset().top

                    }, 600);

                }

            }

        }

    }

</script>

<style scoped>

</style>