<script type="text/x-template" id="mediaitem-mvview-sp">
    <div style="position: relative; display: inline-flex;">
        <div @click.self='app.routeView(item)'
             class="cd-mediaitem-mvview">
            <div style="height: 70px; min-height: 70px; max-height: 70px; width: 100%; margin-left: 5px;">
                <div class="title-browse-sp bold " @click='app.routeView(item)' style="color: darkgrey;">
                    {{ badge ? badge.designBadge : ''}}
                </div>
                <div class="title-browse-sp ">
                    {{ (badge != null && badge.designTag != null) ? badge.designTag : (item.attributes.name ?? '') }}
                </div>
                <div class="title-browse-sp semibold" style="color: darkgrey;">
                    {{ (item.attributes.artistName ?? (item.attributes.curatorName ?? '')) }}
                </div>
            </div>
            <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="516" :width="900"
                ></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': '205px',
                        'margin-left': '260px', 'margin-bottom': '140px',
                        width: '30px',
                        height: '30px',} :
                        {'margin': '205px',
                        'margin-left': '260px', 'margin-bottom': '140px',
                        width: '30px',
                        height: '30px',}]" @click="app.playMediaItem(item)">
                    <%- include("../svg/play.svg") %>
                </div>
            </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': '205px',
                    'margin-left': '260px', 'margin-bottom': '140px',
                    width: '30px',
                    height: '30px',} :
                    {'margin': '205px',
                    'margin-left': '260px', 'margin-bottom': '140px',
                    width: '30px',
                    height: '30px',}]" @click="app.playMediaItem(item)">
                <%- include("../svg/play.svg") %>
            </div>
        </div>
    </div>
</script>

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