{% extends "Base.html" %}

{% block window-title %}
Stemmen
{% endblock %}

{% block main-content %}
{% if track %}
<div id="vote-box" hx-target="body">
  {% if error %}<div class="error">{{ error }}</div>{% endif %}
  <div id="embed"></div>
  <div id="album">
    {% if track.album.image %}
      <img src="{{track.album.image.url}}" />
    {% elif 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 title="{{track.name}}">{{track.name}}</h1>
    <h2 title="{{track.artist}}">{{track.artist}}</h2>
  </div>
  <input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
  <div class="media-control">
    <button id="playpause">⏵️</button>
  </div>

  <div
    id="vote-stars"
    hx-vals='{"spotify_id": "{{ track.id }}"}'
    style="margin-top:10px;"
    >
    <fieldset>
      <legend>Hoeveel sterren geef jij dit?</legend>
      <div class="star-wrapper">
        <a
          hx-vals='{"vote": "-2"}'
          hx-post="{% url 'vote' %}"
        ></a>
        <a
          hx-vals='{"vote": "-1"}'
          hx-post="{% url 'vote' %}"
        ></a>
        <a
          hx-vals='{"vote": "0"}'
          hx-post="{% url 'vote' %}"
        ></a>
        <a
          hx-vals='{"vote": "1"}'
          hx-post="{% url 'vote' %}"
        ></a>
        <a
          hx-vals='{"vote": "2"}'
          hx-post="{% url 'vote' %}"
        ></a>
      </div>
    </fieldset>
    {% if undo %}
      <!--<form class="undo-wrapper" method="post" action="{% url 'undo' %}" hx-vals='{"spotify_id": "{{ undo.track.id }}"}' >-->
      <div class="undo-wrapper"  hx-vals='{"spotify_id": "{{ undo.track.id }}"}' >
        {% csrf_token %}
        <p>Je hebt {{undo.track}} een score van {{undo.points | add:3}} sterren gegeven!</p>
        <button class="undo" hx-post="{% url 'undo' %}" >Undo</button>
      </div>
    {% endif %}
  </div>
</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.togglePlay()
        });
        EmbedController.addListener('playback_update', e => {
          document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
        })
      };
      IFrameAPI.createController(element, options, callback);
  };
</script>
{% 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 %}
{% endblock %}

{% block clippy %}
  {% include "Clippy.html" with body=track.banter img="img/draakje/draakje-headphones3.gif" %}
{% endblock %}