<script type="text/x-template" id="cider-browse">
    <div class="content-inner">
        <h1 class="header-text">{{$root.getLz("term.browse")}}</h1>
         <template v-if="data.relationships && data.relationships.tabs">
            <template v-for="(recom,index) in data.relationships.tabs.data[0].relationships.children.data">
            <div class="row">
                <div class="col" v-if="recom.attributes.name != 'Chart Set'">
                    <h3>{{ recom.attributes.name ?? ""}}</h3>
                </div>
                <div class="col-auto flex-center" v-if="index != 0 && recom.relationships && ((recom.relationships.children &&  recom.relationships.children.data.length > 10) || (recom.relationships.contents && recom.relationships.contents.data.length > 10))">
                    <button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.children ? recom.relationships.children : recom.relationships.contents, recom.attributes.name ?? '', 'listen_now')" >{{app.getLz('term.seeAll')}}</button>
                </div>
            </div>
            <template v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
                <template v-if="index === 0">
                    <mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0" :kind="recom.attributes.editorialElementKind"
                            :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
                </template>
                <template v-else-if="(['385']).includes(recom.attributes.editorialElementKind)">
                    <mediaitem-scroller-horizontal-mvview :imagesize="800" :kind="recom.attributes.editorialElementKind"
                            :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
                </template>
                <template v-else-if="recom.attributes.name == 'Chart Set'">
                   <!-- ignored -->
                </template>
                <template v-else>
                    <mediaitem-scroller-horizontal-large
                            :items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
                </template>
            </template>
            </template>
        </template> 
    </div>
</script>

<script>
    Vue.component('cider-browse', {
        template: "#cider-browse",
        props: ["data"],
        data: function () {
            return {
                app: this.$root
            }
        },
    })    
</script>