{{#isLoading}}
	<div class="list-item">
		<div class="list-item-inner flex flex-a-c">
			<div class="list-item-info-wrap flex flex-a-c">
				<div class="list-item-num">
					<span class="num">{{num}}</span>
				</div>
				<div class="list-item-artwork-container entity-artwork">
					<div class="list-item-artwork-inner">
						<div class="list-item-artwork entity-artwork gradient"></div>		
					</div>
				</div>
				<div class="list-item-title-wrap flex-1">
					<div class="list-item-title text-ellipsis gradient"></div>
					<div class="list-item-sub text-ellipsis gradient"></div>
				</div>
			</div>
			<div class="list-item-metadata flex flex-a-c flex-25">
				<div class="playtime flex-50"></div>
				<div class="bpm flex-50"></div>
			</div>
			<div class="list-actions-wrap flex gradient">
				<div class="list-actions flex flex-a-c"></div>
			</div>
		</div>
	</div>
{{/isLoading}}

{{^isLoading}}
	<div class="list-item player-play" data-type="{{entityType}}" data-playlist-id="{{playlistId}}" data-entity-id="{{entityId}}">
		<div class="list-item-inner flex flex-a-c ">
			<div class="list-item-info-wrap flex flex-a-c">
				<div class="list-item-num">
					<span class="num" data-num="{{num}}">{{num}}</span>
					<div class="music-bars">
						<div></div>
						<div></div>
						<div></div>
					</div>
				</div>
				<div class="list-item-artwork-container entity-artwork">
					<div class="list-item-artwork-inner">
						<div style="background-color:{{artwork.color}};" class="list-item-artwork entity-artwork lazy-img" data-src="{{artwork.sources.small}}"></div>		
					</div>
					<div class="list-item-play">
						<div data-track-id="{{id}}" data-entity-id="{{entityId}}" data-playlist-id="{{playlistId}}" data-playlist-id="" class="play-btn primary-bg-color">
							<i class="play-icon material-icons"></i>
						</div>
					</div>
				</div>
				<div class="list-item-title-wrap flex-1">
					<div class="list-item-title text-ellipsis flex flex-a-c">
						{{#isNew}}
							<i class="badge new"></i>
						{{/isNew}}
						{{#isEmbed}}
							<span class="text-ellipsis">{{title}}</span>
						{{/isEmbed}}
						{{^isEmbed}}
							<a class="text-ellipsis" href="/tracks/{{url}}">{{title}}</a>
						{{/isEmbed}}
					</div>
					<div class="list-item-sub list-item-metadata text-ellipsis flex flex-a-c">
						<div class="flex flex-a-c">
							<span>{{genre.name}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="list-item-metadata flex flex-a-c flex-20">
				<div class="playtime flex-50 flex flex-a-c"><i class="material-icons" data-icon="schedule"></i><span>{{time}}</span></div>
				<div class="bpm flex-50 flex flex-a-c"><i class="badge bpm-icon"></i><span>{{bpm.value}}</span></div>
			</div>
			<div class="list-actions-wrap flex">
				<div class="list-actions btns-wrap flex flex-a-c">
					{{#download}}
						<div class="list-action btn icon-only secondary-btn no-bg demo-download" data-entity-id="{{entityId}}"><i class="material-icons" data-icon="download"></i></div>
					{{/download}}
					<div class="list-action btn icon-only no-bg secondary-btn entity-like" data-entity-id="{{entityId}}"><i class="material-icons"></i></div>
					<div class="list-action btn icon-only no-bg secondary-btn popover-info" data-entity-id="{{entityId}}"><i class="material-icons normalize" data-icon="more_vert"></i></div>
					{{#forSale}}
						<div class="list-action btn primary-btn buy-btn add-to-cart" data-entity-id="{{entityId}}"><i class="material-icons"></i><span class="currency" data-price="{{licensesMinPrice}}"></span></div>
					{{/forSale}}
					{{^forSale}}
						<div class="list-action btn secondary-btn buy-btn add-to-cart" data-entity-id="{{entityId}}">{{statusText}}</div>
					{{/forSale}}
				</div>
			</div>
		</div>
	</div>
{{/isLoading}}