<script type="text/x-template" id="listennow-child">
    <div v-observe-visibility="{callback: visibilityChanged}">
    <template v-if="isVisible && recom.attributes.display.kind != 'MusicSuperHeroShelf'">    
        <div class="row">
            <div class="col">
                <h3>{{ recom.attributes.title ? recom.attributes.title.stringForDisplay : ""}}</h3>
            </div>
            <div class="col-auto flex-center" v-if="recom.relationships.contents.data.length >= 10">
                        <button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.contents, recom.attributes.title ? recom.attributes.title.stringForDisplay : '', 'listen_now')" >{{app.getLz('term.seeAll')}}</button>
            </div>
        </div>
        <template v-if="recom.attributes.display.kind == 'MusicCoverShelf'">
            <mediaitem-scroller-horizontal-large
                            :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
        </template>
        <template v-else>
            <mediaitem-scroller-horizontal-sp
                            :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>
        </template>
    </template> 
    <template v-else-if="recom.attributes.display.kind != 'MusicSuperHeroShelf'">
        <div style="height:330px"> </div>
    </template>    

    </div>            
</script>
<script>
    Vue.component('listennow-child', {
        template: "#listennow-child",
        props: ["recom"],
        data: function () {
            return {
                isVisible: true,
                app: this.$root
            }
        },
        methods: {
            visibilityChanged: function (isVisible, entry) {
                // this.isVisible = isVisible
            },
        }
    })    
</script>