<div class="container">
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
              <li><a href="../../">{{trans "home"}}</a></li>
              <li><a href="/analytics">{{trans "analytics"}}</a></li>
              <li class="active">{{trans "iTunes heatmap"}}</li>
            </ol>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h1>{{trans "iTunes Heatmap"}}</h1>
        </div>
    </div>
</div>

<div class='container'>

	<div class="panel panel-default">

	    <div class='panel-heading'>
	        <h3>{{trans "Select a Release"}}</h3>
	    </div>

	    <div class="panel-body">

			<div id="release-select"></div>

			<br>

			<div class='row'>
				<div id="datepicker" class="date-picker col-md-10"></div>
				<br>
			    <div class="col-md-2 text-right">
			        <button type="button" id="mapit" class="btn btn-update">{{trans "Apply"}}</button>
			    </div>
			</div>

		</div>

	</div>

</div>



<br>

<div class="container">
	<div id='display-release-container' class="panel panel-default">
		<div class='panel-heading'>
			<div class='row'>
				<div id="release-display"></div>
			</div>
			<div class="row">
			</div>
		</div>
		<div class="panel-body">

			<div class="row">
				<div class="col-md-12 map-container">
					<div id="map_canvas"></div>
					<div id="spinner" class="progress progress-striped active">
						<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" role="progressbar" class="progress-bar"></div>
						<div>{{trans "Loading"}}</div>
					<div>
				</div>
			</div>
		</div>
		<div class='panel-body'>
			<hr>
	        <p id="analytics-disclaimer"><b>{{trans "Please Note"}}:</b>&nbsp;{{trans "Analytics disclaimer"}}</p>
	    </div>
	</div>
</div>