<script type="text/x-template" id="mediaitem-mvview">
    <template>
        <div style="position: relative; display: inline-flex;">
            <div @click.self='app.routeView(item)'
                 class="cd-mediaitem-mvview">
                <div class="artwork">
                    <mediaitem-artwork
                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
                            :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
                            :size="imagesize ?? 300"
                    ></mediaitem-artwork>
                </div>
                <div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'>
                    <div class="button" style="
                    border-radius: 50%;
                    background: rgba(50,50,50,0.7);"
                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
                        'margin-left': '250px',
                        width: '40px',
                        height: '40px',} :
                        {margin: '35px',  'margin-left': '95px',
                        width: '120px',
                        height: '120px',}]" @click="app.playMediaItem(item)">
                        <%- include("../svg/play.svg") %>
                    </div>
                </div>
                <div class="title text-overflow-elipsis" @click='app.routeView(item)'>
                    {{ item.attributes.name ?? '' }}
                </div>
                <div class="subtitle text-overflow-elipsis item-navigate" v-if="item.attributes.artistName" :style = "{'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : ''}" @click="if(item.attributes.artistName)app.searchAndNavigate(item,'artist')">
                    {{ item.attributes.artistName ?? '' }}
                </div>

            </div>
            <div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)' tabindex="0">
                <div class="button" style="
                border-radius: 50%;
                background: rgba(50,50,50,0.7);"
                     :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
                    'margin-left': '250px',
                    width: '40px',
                    height: '40px',} :
                    {margin: '35px',  'margin-left': '95px',
                    width: '120px',
                    height: '120px',}]" @click="app.playMediaItem(item)">
                    <%- include("../svg/play.svg") %>
                </div>
            </div>
        </div>
    </template>
</script>

<script>
    Vue.component('mediaitem-mvview', {
        template: '#mediaitem-mvview',
        props: ['item', "imagesize"],
        data: function () {
            return {
                app: this.$root,
            }
        },
        methods: {}
    });
</script>