<!DOCTYPE html>
<html lang="en">
<head>
<title>Pyrite</title>
<link rel="stylesheet" type="text/css" href="./static/pyrite.css">
<script type="text/javascript" src="./static/pyrite.js"></script>
<script>window.onload = init;</script>
<meta name="viewport" content="width=device-width, initial-scale=0.6">
<meta name="description" content="Fool's gold.">
<link rel="manifest" href="./static/pyrite.webmanifest">
</head>
<body>
<main>
<header>
<h1>Pyrite</h1>
</header>
<div id="artist_list" class="list">
{% for artist in artists %}
<label for="artist_{{ loop.index }}">
<input type="radio" id="artist_{{ loop.index }}" name="artist" value="{{ artist }}" onclick="select_artist(event)">
<div class="list_item artist">
<span class="artist_name">{{ artist }}</span>
</div>
</label>
{% endfor %}
</div>
<div id="album_list" class="list">
</div>
<div id="track_list" class="list">
</div>
<div id="player_container">
<div id="settings">
<div>
<label for="playlist-select">Playlist:</label>
<select id="playlist-select" onchange="select_playlist(event)">
<option value="">All Tracks</option>
{% for playlist in playlists %}
<option value="{{ playlist }}"{% if playlist == request.cookies.get('playlist') %} selected{% endif %}>{{ playlist }}</option>
{% endfor %}
</select>
</div>
<div>
<label for="visualizer-select">Visualizer:</label>
<select id="visualizer-select" onchange="select_visualizer(event)">
<option value="disabled" selected>Disabled</option>
<option value="bar_graph">Bar Graph</option>
</select>
</div>
</div>
<div id="cover_art"><img alt="Album cover art" src="./static/pyrite-256x256.jpg"></div>
<div id="title">
<h2><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h2>
<h2 id="now_playing_title">Title</h2>
<canvas id="visualizer" height="300" width="1000"></canvas>
</div>
<div id="player_controls">
<audio id="player" style="display:none"></audio>
<button id="prev-track-btn" class="btn" onclick="prevTrack()" aria-label="Previous Track">
<img id="prev" alt="Previous Track" src="./static/prev.svg"></img>
</button>
<button id="play-btn" class="btn" onclick="playTrack()" aria-label="Play Track">
<img id="prev" alt="Play Track" src="./static/play.svg"></img>
</button>
<button id="pause-btn" class="btn" onclick="pauseTrack()" aria-label="Pause Track" style="display:none">
<img id="prev" alt="Pause Track" src="./static/pause.svg"></img>
</button>
<button id="next-track-btn" class="btn" onclick="nextTrack()" aria-label="Next Track">
<img id="prev" alt="Next Track" src="./static/prev.svg"></img>
</button>
<button id="vol-btn" class="btn" onclick="volume_off()" aria-label="Volume Off">
<img id="vol" alt="Volume Off" src="./static/volume-max.svg"</img>
</button>
<button id="vol-off-btn" class="btn" onclick="volume_restore()" aria-label="Volume Restore" style="display:none">
<img id="vol-off" alt="Volume Restore" src="./static/volume-off.svg"</img>
</button>
<input id="volume-slider" type="range" max="100" value="100"aria-label="Volume Slider">
</div>
<div id="seek_controls">
<input id="seek-slider" type="range" max="0" value="0" aria-label="Seek Slider">
<output id="current-time">0:00</output>/<output id="duration">0:00</output>
</div>
</div>
</main>
<template id="artist_template">
<label for="artist_$n">
<input type="radio" id="artist_$n" name="artist" value="$artist_name" onclick="select_artist(event)">
<div class="list_item artist">
<span class="artist_name">$artist_name</span>
</div>
</label>
</template>
<template id="album_template">
<label for="album_$n">
<input type="radio" id="album_$n" name="album" value="$album_name" onclick="select_album(event)">
<div class="list_item album">
<img src=""><span class="album_name">$album_name</span><span class="album_year">$album_year</span>
</div>
</label>
</template>
<template id="track_template">
<label for="track_$n">
<input type="radio" id="track_$n" name="track" value="$track_title" onclick="select_track(event)">
<div class="list_item track">
<span class="track_num">$disc_num.$track_num</span><span class="track_title">$track_title</span><span class="track_length">$track_len</span>
</div>
</label>
</template>
</body>
</html>