<polymer-element name="cs-music-equalizer" extends="cs-music-screen">
	<template vertical center layout>
		<link rel="stylesheet" href="style.css">
		<cs-music-equalizer-levels-labels horizontal center layout>
			<label flex>{{gain_levels[0]}}</label>
			<label flex>{{gain_levels[1]}}</label>
			<label flex>{{gain_levels[2]}}</label>
			<label flex>{{gain_levels[3]}}</label>
			<label flex>{{gain_levels[4]}}</label>
			<label flex>{{gain_levels[5]}}</label>
			<label flex>{{gain_levels[6]}}</label>
			<label flex>{{gain_levels[7]}}</label>
			<label flex>{{gain_levels[8]}}</label>
			<label flex>{{gain_levels[9]}}</label>
		</cs-music-equalizer-levels-labels>
		<cs-music-equalizer-levels horizontal around-justified layout>
			<input type="range" value="{{gain_levels[0]}}" data-index="0" min="-10" max="10" step=".01">
			<input type="range" value="{{gain_levels[1]}}" data-index="1" min="-10" max="10" step=".01">
			<input type="range" value="{{gain_levels[2]}}" data-index="2" min="-10" max="10" step=".01">
			<input type="range" value="{{gain_levels[3]}}" data-index="3" min="-10" max="10" step=".01">
			<input type="range" value="{{gain_levels[4]}}" data-index="4" min="-10" max="10" step=".01">
			<input type="range" value="{{gain_levels[5]}}" data-index="5" min="-10" max="10" step=".01">
			<input type="range" value="{{gain_levels[6]}}" data-index="6" min="-10" max="10" step=".01">
			<input type="range" value="{{gain_levels[7]}}" data-index="7" min="-10" max="10" step=".01">
			<input type="range" value="{{gain_levels[8]}}" data-index="8" min="-10" max="10" step=".01">
			<input type="range" value="{{gain_levels[9]}}" data-index="9" min="-10" max="10" step=".01">
		</cs-music-equalizer-levels>
		<cs-controls horizontal center layout>
			<cs-control flex icon="chevron-left" on-tap="{{back}}"></cs-control>
			<cs-control flex icon="database" on-tap="{{equalizer_presets}}"></cs-control>
		</cs-controls>
	</template>
	<script src="script.js"></script>
</polymer-element>
