<commit_before><script>
module.exports = {
    props: {
        id: String,
        isSelected: Boolean,

        isFirstStory: Boolean,
        isFirstAtLoad: Boolean,

        isDeadline: Boolean,
        isHighlighted: Boolean,
        isNextMeeting: Boolean,
        isAfterNextMeeting: Boolean,

        summary: String, 
        status: String,
        owner: String,
        description: String,
        warning: String,

        comments: Array
    }, 
    data: function () {
        return {
            isScreenXs: false
        };
    },
    computed: {
        cssClass: function () {
            var isClipboardActive = false;
            return ['story', 'col-xs-12', 'debug', 'no-select', {
                selected: this.isSelected,
                'not-selected': !this.isSelected,

                first: this.isFirstStory,
                'first-at-load': this.isFirstAtLoad,

                deadline: this.isDeadline,
                highlighted: this.isHighlighted && !isClipboardActive,
                'next-meeting': this.isNextMeeting,
                'after-meeting': this.isAfterNextMeeting
            }];
        },
        isStoryMineClass: function () {
            return "";
        }
    },
    methods: {
        highlight: function () {
            this.$emit('highlight', this.id);
        },
        selectLabel: function (text) {
            this.$emit('select-label', text);
        },
        select: function () {
            this.$emit('select-story', this);
        },
        save: function (story) {
            this.$emit('save', story);
        },
        deselect: function () {
            this.$emit('deselect-story', this);
        },
        remove: function () {
            this.$emit('remove', this);
        }
     }
}
</script>

<template lang="pug">
    div(v-bind:class="cssClass" @click="highlight" @dblclick="select" @mousedown="highlight")
        //-  TODO: Get the id, for scrolling 
        div(v-if="!isSelected")
            .row.no-select.hidden-xs
                .col-sm-10.paddy
                    .summary(:class="isStoryMineClass")
                        cb-story-summary(@select-label="selectLabel", :summary="summary")
                .col-sm-1.paddy.details.icon
                    //-         <div class="pull-right" ng-show="story.isOver" ng-click="select(story)">
                    //-             <span class="glyphicon glyphicon-option-horizontal"></span>
                    //-         </div> 
                .col-sm-1.grippy
                    .pull-right.grippy-viz
                        span.grippy-bar.top
                        span.grippy-bar
                        .row
                             .col-sm-offset-5
                                .glyphicon.glyphicon-move &nbsp;
                        span.grippy-bar.top
                        span.grippy-bar
                //- TODO: bumpy
        div(v-else)
            cb-story-detail(v-bind="$props" @save="save" @deselect="deselect" @remove="remove")
</template>

<!-- // Old template, for reference:
//
// <div ng-if="::!isScreenXs" class="row no-select hidden-xs" ng-show="!story.isSelected" id="story-{{$index}}"><commit_msg>Vue: Migrate the 'select story' icon<commit_after><script>
module.exports = {
    props: {
        id: String,
        isSelected: Boolean,

        isFirstStory: Boolean,
        isFirstAtLoad: Boolean,

        isDeadline: Boolean,
        isHighlighted: Boolean,
        isNextMeeting: Boolean,
        isAfterNextMeeting: Boolean,

        summary: String, 
        status: String,
        owner: String,
        description: String,
        warning: String,

        comments: Array
    }, 
    data: function () {
        return {
            isScreenXs: false,
            isMouseOver: false
        };
    },
    computed: {
        cssClass: function () {
            var isClipboardActive = false;
            return ['story', 'col-xs-12', 'debug', 'no-select', {
                selected: this.isSelected,
                'not-selected': !this.isSelected,

                first: this.isFirstStory,
                'first-at-load': this.isFirstAtLoad,

                deadline: this.isDeadline,
                highlighted: this.isHighlighted && !isClipboardActive,
                'next-meeting': this.isNextMeeting,
                'after-meeting': this.isAfterNextMeeting
            }];
        },
        isStoryMineClass: function () {
            return "";
        }
    },
    methods: {
        highlight: function () {
            this.$emit('highlight', this.id);
        },
        selectLabel: function (text) {
            this.$emit('select-label', text);
        },
        select: function () {
            this.$emit('select-story', this);
        },
        save: function (story) {
            this.$emit('save', story);
        },
        deselect: function () {
            this.$emit('deselect-story', this);
        },
        remove: function () {
            this.$emit('remove', this);
        },
        mouseOver: function () {
            this.isMouseOver = true;
        },
        mouseLeave: function () {
            this.isMouseOver = false;
        }
     }
}
</script>

<template lang="pug">
    div(v-bind:class="cssClass" @click="highlight" @dblclick="select" @mousedown="highlight" 
        @mouseenter="mouseOver" @mouseleave="mouseLeave")
        //-  TODO: Get the id, for scrolling 
        div(v-if="!isSelected")
            .row.no-select.hidden-xs
                .col-sm-10.paddy
                    .summary(:class="isStoryMineClass")
                        cb-story-summary(@select-label="selectLabel", :summary="summary")

                .col-sm-1.paddy.details.icon
                     .pull-right(v-show="isMouseOver" @click="select")
                         span.glyphicon.glyphicon-option-horizontal

                .col-sm-1.grippy
                    .pull-right.grippy-viz
                        span.grippy-bar.top
                        span.grippy-bar
                        .row
                             .col-sm-offset-5
                                .glyphicon.glyphicon-move &nbsp;
                        span.grippy-bar.top
                        span.grippy-bar
                //- TODO: bumpy
        div(v-else)
            cb-story-detail(v-bind="$props" @save="save" @deselect="deselect" @remove="remove")
</template>

<!-- // Old template, for reference:
//
// <div ng-if="::!isScreenXs" class="row no-select hidden-xs" ng-show="!story.isSelected" id="story-{{$index}}">
{'fraction_non_alphanumeric': 0.13343488194973344, 'fraction_numerical': 0.0021325209444021326, 'mean_word_length': 1.4300518134715026, 'pattern_counts': {'":': 2, '<': 19, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5436779', 'n_tokens_mistral': 1910, 'n_tokens_neox': 1800, 'n_words': 313}