<!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>
<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="cover_art"><img alt="Album cover art" src="./static/pyrite.jpg"></div>
<div id="title">
<h4><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h4>
<h3 id="now_playing_title">Title</h3>
</div>
<div id="player_controls">
<audio id="player" style="display:none"></audio>
<button id="prev-track-btn" class="btn" onclick="prevTrack()">
<img id="prev" src="./static/prev.svg"></img>
</button>
<button id="play-btn" class="btn" onclick="playTrack()">
<img id="prev" src="./static/play.svg"></img>
</button>
<button id="pause-btn" class="btn" onclick="pauseTrack()" style="display:none">
<img id="prev" src="./static/pause.svg"></img>
</button>
<button id="next-track-btn" class="btn" onclick="nextTrack()">
<img id="prev" src="./static/prev.svg"></img>
</button>
<button id="mute-btn" class="btn">
<img id="mute" src="./static/volume-max.svg"</img>
</button>
<input id="volume-slider" type="range" max="100" value="0">
</div>
<div id="seek_controls">
<input id="seek-slider" type="range" max="100" value="0">
<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>