{% extends "base.html" %}
{% block title %}musickit{% endblock %}
{% block body %}
<header class="topbar">
  <span class="brand">musickit</span>
  <input type="search"
         id="search"
         class="search-input"
         placeholder="Search artists, albums, tracks…  (/)"
         autocomplete="off"
         spellcheck="false">
  <span class="user">{{ user }}</span>
  <form method="post" action="/logout" class="logout-form">
    <button type="submit" class="ghost-button">Sign out</button>
  </form>
</header>

<main class="three-pane">
  <section class="pane pane-artists" aria-label="Artists">
    <h2>Artists <span class="count">({{ artists|length }})</span></h2>
    <ul class="row-list" id="artists-list">
      {% for ar_id, name in artists %}
      <li>
        <button type="button"
                class="row-button"
                data-action="load-artist"
                data-id="{{ ar_id }}">
          {{ name }}
        </button>
      </li>
      {% else %}
      <li class="empty">No artists in library yet.</li>
      {% endfor %}
    </ul>
  </section>

  <section class="pane pane-albums" aria-label="Albums">
    <div id="albums-pane">
      <p class="empty">Pick an artist to see albums.</p>
    </div>
  </section>

  <section class="pane pane-tracks" aria-label="Tracks">
    <div id="tracks-pane">
      <p class="empty">Pick an album to see tracks.</p>
    </div>
  </section>
</main>

<canvas class="visualizer-canvas" id="viz-canvas" aria-hidden="true"></canvas>

<aside class="lyrics-panel" id="lyrics-panel" aria-label="Lyrics">
  <div class="lyrics-header">
    <span>Lyrics</span>
    <button type="button" class="ghost-button" id="lyrics-close" aria-label="Close lyrics">×</button>
  </div>
  <div class="lyrics-body" id="lyrics-body">
    <p class="empty">No track playing.</p>
  </div>
</aside>

<footer class="now-playing" id="now-playing">
  <img id="np-cover" class="np-cover" alt="" style="visibility: hidden">
  <div class="np-controls">
    <button type="button" class="np-button" data-action="prev" id="prev-button" disabled aria-label="Previous track">
      <span aria-hidden="true">⏮</span>
    </button>
    <button type="button" class="play-button" data-action="play-pause" id="play-button" disabled aria-label="Play / pause">
      <span aria-hidden="true">▶</span>
    </button>
    <button type="button" class="np-button" data-action="next" id="next-button" disabled aria-label="Next track">
      <span aria-hidden="true">⏭</span>
    </button>
  </div>
  <div class="np-meta">
    <span class="np-title" id="np-title">Nothing playing</span>
    <span class="np-artist" id="np-artist"></span>
  </div>
  <div class="np-progress">
    <span class="np-pos" id="np-pos">00:00</span>
    <progress id="np-bar" max="1" value="0"></progress>
    <span class="np-dur" id="np-dur">00:00</span>
  </div>
  <div class="np-volume">
    <button type="button" class="np-button" data-action="toggle-viz" aria-label="Toggle visualizer (f)">
      <span aria-hidden="true">▦</span>
    </button>
    <button type="button" class="np-button" data-action="toggle-lyrics" aria-label="Toggle lyrics (l)">
      <span aria-hidden="true">♪</span>
    </button>
    <label class="visually-hidden" for="np-vol">Volume</label>
    <input type="range" id="np-vol" min="0" max="1" step="0.01" value="1">
  </div>
  <audio id="audio" preload="none"></audio>
</footer>

<script src="/web-static/app.js"></script>
<script src="/web-static/visualizer.js"></script>
{% endblock %}