{% if track %}
<div id="vote-box" hx-target="#vote-box">
  {% if error %}<div class="error">{{ error }}</div>{% endif %}
  <div id="embed"></div>
  <div id="album">
    {% if track.album.image_url %}
      <img src="{{track.album.image_url}}" />
    {% else %}
      <img src="https://kagi.com/proxy/windows-95-logo-png-1.png?c=xjdP8sWN58YWflc6NcGN5ZvzREJyOwtrou-TSsaXxcx37J0VVJbSeycOcAptMJEUpzzvqmbKQ3JRuSmPN8HCK43OxjkRe_cQvncxVzlCblc%3D" />
    {% endif %}
    <h1>{{track.name}}</h1>
    <h2>{{track.artist}}</h2>
  </div>
  <input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
  <button id="playpause">||</button>

  <div
    id="vote-buttons"
    hx-vals='{"spotify_id": "{{ track.id }}"}'
    style="margin-top:10px;"
    >
    <fieldset>
      <legend>Dit vind ik een leuk nummer!</legend>
      <button
        hx-vals='{"vote": "2"}'
        hx-post="{% url 'vote-track' %}"
      >Helemaal mee eens</button>
      <button
        hx-vals='{"vote": "1"}'
        hx-post="{% url 'vote-track' %}"
      >Mee eens</button>
      <button
        hx-vals='{"vote": "0"}'
        hx-post="{% url 'vote-track' %}"
      >Neutraal</button>
      <button
        hx-vals='{"vote": "-1"}'
        hx-post="{% url 'vote-track' %}"
      >Niet mee eens</button>
      <button
        hx-vals='{"vote": "-2"}'
        hx-post="{% url 'vote-track' %}"
      >Helemaal niet mee eens</button>
    </fieldset>
  </div>
  {% if track.banter %}
    {% block popup %}
      {% include "Popup.html" with body=track.banter title=track img="img/draakje/draakje-headphones3.gif" %}
    {% endblock %}
  {% endif %}
</div>
<script>
  window.onSpotifyIframeApiReady = (IFrameAPI) => {
    let element = document.getElementById('embed');
    let options = {
      uri: 'spotify:track:{{track.id}}'
    };
    const callback = (EmbedController) => {
        document.getElementById("playpause").addEventListener('click', () => {
          //EmbedController.loadUri(episode.dataset.spotifyId)
          EmbedController.togglePlay()
        });
        EmbedController.addListener('playback_update', e => {
          console.log(e);
          document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
        })
      };
      IFrameAPI.createController(element, options, callback);
  };
{% else %}
<p hx-boost="true">
  Je hebt niets meer om te stemmen. Lekker bezig!
  <a href="{% url 'nominate' %}">Nomineer zelf iets</a>, als je nog quota hebt.
</p>
{% endif %}