<script type="text/x-template" id="cider-multiroom">
    <div class="content-inner cider-multiroom">
        <div class="artworkContainer" v-if ="data.attributes?.uber?.masterArt?.url">
            <artwork-material :url="data.attributes?.uber?.masterArt?.url ?? ''" size="800" images="1"></artwork-material>
        </div>
        <div class="detail">
            <h1 class="header-text">{{data.attributes?.title ?? ""}}</h1>
            <h2 class="header-desc" v-html='data.relationships?.children?.data[0]?.attributes?.description ?? ""'></h2>
            <template v-if="data.relationships">
                <template v-for="(recom,index) in data.relationships.children.data">
                    <template v-if="(recom.relationships?.contents?.data ?? []).length > 0">    
                        <div class="row">
                            <div class="col" v-if="recom.attributes.name != 'Chart Set'">
                                <h3>{{ recom.attributes?.title ?? ""}}</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="(recom.attributes.name && recom.attributes.name.includes('ideo')) || index === 0">
                                <mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0"
                                        :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'">
                        
                            </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>
            </template> 
        </div>    
    </div>
</script>

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