<!DOCTYPE html>

<html lang="en">
	<head>
		<title>{{ config.get('site_name') }}</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/fookebox.css" />

		<script src="js/jquery-1.12.4.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/fookebox.js"></script>
		<script src="js/jquery-ui.min.js"></script>
{% if locale.code != 'en' %}
		<script type="text/javascript" src="js/i18n-{{ locale.code }}.js"></script>
{% end %}
		<script type="text/javascript" src="js/i18n.js"></script>
	</head>
{% if config.getboolean('enable_queue_album') %}
	<body queue-albums="True">
{% else %}
	<body>
{% end %}
		<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<p class="navbar-text now-playing visible-xs">{{ locale.translate('Now playing') }}: <span class="currentArtist"></span> &ndash; <span class="currentTitle"></span></p>
				</div>
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li class="active"><a data-toggle="tab" href="#artists" id="showArtists">{{locale.translate('Artists')}}</a></li>
						<li><a href="#genres" data-toggle="tab" id="showGenres">{{locale.translate('Genres')}}</a></li>
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{locale.translate('Queue')}} <span class="label label-info" id="queueStatus"></span></a>
							<ul class="dropdown-menu" role="menu" id="queue">
{% for i in range(0, int(config.get('max_queue_length'))) %}
								<li class="disabled"><a role="menuitem" tabindex="-1">
{% if config.getboolean('enable_song_removal') %}
<span class="controls glyphicon glyphicon-trash" aria-hidden="true">&nbsp;</span>
{% end %}
										<span class="artist"></span> &ndash; <span class="title"></span></a>
								</li>
{% end %}
							</ul>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right hidden-xs">
						<p class="navbar-text now-playing">{{ locale.translate('Now playing') }}: <span class="currentArtist"></span> &ndash; <span class="currentTitle"></span></p>
					</ul>
				</div>
			</div>
		</div>
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-3 col-md-2 sidebar">
{% if config.getboolean('enable_controls') %}
					<div class="panel panel-default" id="controls">
						<div class="panel-heading">{{ locale.translate('Controls') }}</div>
						<div class="panel-body">
							<a id="control-prev" title="{{locale.translate('back')}}" href="#"><span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span></a>
							<a id="control-pause" title="{{locale.translate('pause')}}" href="#"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span></a>
							<a id="control-play" title="{{locale.translate('play')}}" href="#"><span class="glyphicon glyphicon-play" aria-hidden="true"></span></a>
							<a id="control-next" title="{{locale.translate('next')}}" href="#"><span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span></a>
							<a id="control-voldown" title="{{locale.translate('volume down')}}" href="#"><span class="glyphicon glyphicon-volume-down" aria-hidden="true"></span></a>
							<a id="control-volup" title="{{locale.translate('volume up')}}" href="#"><span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span></a>
							<a id="control-rebuild" title="{{locale.translate('rebuild database')}}" href="#"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></a>
						</div>
					</div>
{% end %}
					<div class="tab-content">
						<div class="tab-pane active" id="artists">
{% if config.getboolean('show_search') %}
							<form class="form" id="artistSearchForm">
								<input type="text" class="form-control" placeholder="{{locale.translate('Search artists')}}" id="artistSearch">
							</form>
{% end %}
							<ul class="nav nav-pills nav-stacked nav-sidebar">
{% for artist in artists %}
							<li class="artist"><a href="#artist={{artist}}" data-value="{{artist}}">{{artist or locale.translate('(no artist)')}}</a></li>
{% end %}
							</ul>
						</div>
						<div class="tab-pane" id="genres">
{% if config.getboolean('show_search') %}
							<form class="form" id="genreSearchForm">
								<input type="text" class="form-control" placeholder="{{locale.translate('Search genres')}}" id="genreSearch">
							</form>
{% end %}
							<ul class="nav nav-pills nav-stacked nav-sidebar">
{% for genre in genres %}
								<li class="genre"><a href="#genre={{genre}}" data-value="{{ genre }}">{{genre or locale.translate('(no genre)')}}</a></li>
{% end %}
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-9 col-md-10 col-sm-offset-3 col-md-offset-2 main hidden-xs">
					<div id="result" class="panel panel-default"></div>
				</div>
			</div>
		</div>
	</body>
</html>
