<polymer-element name="cs-music-playlist" extends="cs-music-screen">
	<template vertical center layout>
		<link rel="stylesheet" href="style.css">
		<template if="{{list.length}}">
			<cs-music-playlist-items>
				<template repeat="{{item, index in list}}">
					<cs-music-playlist-item data-index="{{index}}" on-tap="{{play}}" playing="{{item.playing}}">
						<template if="{{item.playing == 'yes'}}">
							<i class="fa fa-{{item.icon}}"></i>
						</template>
						{{item.artist_title}}
					</cs-music-playlist-item>
				</template>
			</cs-music-playlist-items>
		</template>
		<template if="{{!list.length}}">
			<cs-loading></cs-loading>
		</template>
		<cs-controls horizontal center layout>
			<cs-control flex icon="chevron-left" on-tap="{{back}}"></cs-control>
			<cs-control flex icon="repeat" on-tap="{{repeat}}"></cs-control>
			<cs-control flex icon="random" on-tap="{{shuffle}}"></cs-control>
		</cs-controls>
	</template>
	<script src="script.js"></script>
</polymer-element>
