<script type="text/x-template" id="cider-recordlabel">
    <div class="content-inner artist-page">
        <div class="artist-header" :style="getArtistPalette(data)">
            <div class="row">
                <div class="col-sm" style="width: auto;">
                    <div class="artist-image">
                        <mediaitem-artwork
                                shadow="large"
                                :url="data.attributes.artwork ? data.attributes.artwork.url : ''"
                                size="220" type="artists"></mediaitem-artwork>
                    </div>
                </div>
                <div class="col flex-center"
                >
                    <h1>{{ data.attributes.name }}</h1>
                </div>

            </div>
        </div>
        <div class="artist-body">
            <div v-if = "app.showingPlaylist.attributes.description">
                <div class="row">
                    <h3>About </h3>
                </div>
                <div class="row">
                    <div>{{ app.showingPlaylist.attributes.description.standard }}</div>
                </div>
                    
            </div>   
            <template v-if="data.views && data.views['latest-releases']"> 
            <div class="row">
                <div class="col">
                    <h3>{{ data.views["latest-releases"].attributes.title ?? ""}}</h3>
                </div>
                <div class="col-auto flex-center" v-if="data.views['latest-releases'].data.length >= 10">
                    <button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' -  Latest Releases', 'latest-releases')">{{app.getLz('term.seeAll')}}</button>
                </div>
            </div>
            <mediaitem-square :item="item" v-for="item in data.views['latest-releases'].data">
            </mediaitem-square>
            </template>
            <template v-if="data.views && data.views['top-releases']">
            <div class="row">
                <div class="col">
                    <h3>{{ data.views["top-releases"].attributes.title ?? ""}}</h3>
                </div>
                <div class="col-auto flex-center" v-if="data.views['top-releases'].data.length >= 10">
                    <button class="cd-btn-seeall" @click="app.showRecordLabelView(data.id, data.attributes.name + ' -  Top Releases', 'top-releases')">{{app.getLz('term.seeAll')}}</button>
                </div>
            </div>
            <mediaitem-square :item="item" v-for="item in data.views['top-releases'].data">
            </mediaitem-square>
            </template>
            <template v-if="data.relationships && data.relationships.playlists && data.relationships.playlists.data.length > 0">
            <div class="row">
                <div class="col">
                    <h3>Playlists</h3>
                </div>
                <div class="col-auto flex-center" v-if="data.relationships.playlists.data.length >= 5">
                    <button class="cd-btn-seeall" @click="app.showCollection(data.relationships.playlists, data.attributes.name + ' -  Playlists', 'curator')">{{app.getLz('term.seeAll')}}</button>
                </div>
            </div>
            <mediaitem-square :item="item" v-for="item in data.relationships.playlists.data.limit(5)">
            </mediaitem-square>
            </template>
        </div>
    </div>
</script>
<script>
    Vue.component('cider-recordlabel', {
        template: "#cider-recordlabel",
        props: ['data'],
        data: function () {
            return {
                topSongsExpanded: false,
                app: this.$root
            }
        },
        methods: {
            getArtistPalette(artist) {
                if (artist["attributes"]["artwork"]) {
                    return {
                        "background": "#" + artist["attributes"]["artwork"]["bgColor"],
                        "color": "#" + artist["attributes"]["artwork"]["textColor1"],
                    }
                } else {
                    return {
                        "background": "#000000",
                        "color": "#ffffff",
                    }
                }
            },
            getTopResult() {
                if (this.search.results["meta"]) {
                    return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
                } else {
                    return false;
                }
            }
        }
    })
</script>