{{define "footer"}}
    </div>
  </main>
</div>

{{if .User}}{{template "player"}}{{template "player_art_modal"}}{{end}}
{{template "shortcuts_modal"}}
{{template "confirm_delete_modal"}}

<script src="/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/app.js"></script>
</body>
</html>
{{end}}

{{define "player"}}
<audio id="vs-audio" preload="metadata"></audio>
<div id="vs-lyrics-panel" class="vs-lyrics-panel d-none"></div>
<div class="vs-player">
  <img id="vs-player-art" class="vs-player-art" src="/static/img/default-art.svg" alt="" role="button" title="View larger photo">
  <div class="vs-player-meta">
    <a id="vs-player-title" class="vs-player-title" href="javascript:void(0)">Nothing playing</a>
    <a id="vs-player-artist" class="vs-player-artist" href="javascript:void(0)"></a>
  </div>
  <div class="vs-player-controls">
    <div class="vs-player-buttons">
      <button id="vs-shuffle-btn" type="button" class="vs-player-btn" title="Shuffle"><i class="bi bi-shuffle"></i></button>
      <button id="vs-prev-btn" type="button" class="vs-player-btn" title="Previous (J)"><i class="bi bi-skip-start-fill"></i></button>
      <button id="vs-play-btn" type="button" class="vs-player-btn vs-play" title="Play/Pause (Space)"><i class="bi bi-play-fill"></i></button>
      <button id="vs-next-btn" type="button" class="vs-player-btn" title="Next (L)"><i class="bi bi-skip-end-fill"></i></button>
      <button id="vs-repeat-btn" type="button" class="vs-player-btn" title="Repeat: off" data-repeat="off"><i class="bi bi-repeat"></i></button>
    </div>
    <div class="vs-player-timeline">
      <span id="vs-current-time" class="vs-player-time">0:00</span>
      <input id="vs-progress" type="range" class="form-range" min="0" max="100" value="0">
      <span id="vs-duration" class="vs-player-time">0:00</span>
    </div>
    <button id="vs-lyrics-btn" type="button" class="vs-player-btn" title="Lyrics"><i class="bi bi-quote"></i></button>
    <button id="vs-now-star" type="button" class="vs-star-btn" data-star-toggle data-item-type="song" data-item-id="" title="Favorite">
      <i class="bi bi-star"></i>
    </button>
    <div class="vs-player-volume">
      <button id="vs-mute-btn" type="button" class="vs-player-btn" title="Mute (M)"><i class="bi bi-volume-up"></i></button>
      <input id="vs-volume" type="range" class="form-range" min="0" max="1" step="0.05" value="1">
    </div>
  </div>
</div>
{{end}}

{{define "player_art_modal"}}
<div class="modal fade" id="vs-player-art-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content bg-transparent border-0">
      <button type="button" class="btn-close btn-close-white ms-auto me-2 mt-2" data-bs-dismiss="modal" aria-label="Close"></button>
      <img id="vs-player-art-modal-img" src="" alt="" class="w-100 rounded">
    </div>
  </div>
</div>
{{end}}

{{define "shortcuts_modal"}}
<div class="modal fade" id="vs-shortcuts-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-keyboard"></i> Keyboard shortcuts</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <table class="table table-sm mb-0">
          <tbody>
            <tr><td><kbd>Space</kbd> / <kbd>K</kbd></td><td>Play / Pause</td></tr>
            <tr><td><kbd>J</kbd></td><td>Previous track</td></tr>
            <tr><td><kbd>L</kbd></td><td>Next track</td></tr>
            <tr><td><kbd>←</kbd> / <kbd>→</kbd></td><td>Seek -5s / +5s</td></tr>
            <tr><td><kbd>↑</kbd> / <kbd>↓</kbd></td><td>Volume up / down</td></tr>
            <tr><td><kbd>M</kbd></td><td>Mute</td></tr>
            <tr><td><kbd>/</kbd></td><td>Focus search</td></tr>
            <tr><td><kbd>?</kbd></td><td>This help</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{{end}}

{{define "confirm_delete_modal"}}
<div class="modal fade" id="vs-confirm-delete-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-exclamation-triangle text-danger"></i> Confirm</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">Are you sure?</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" data-confirm-action data-bs-dismiss="modal">Delete</button>
      </div>
    </div>
  </div>
</div>
{{end}}

{{define "csrf_field"}}<input type="hidden" name="csrf_token" value="{{.}}">{{end}}