{% 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 %}
  {% include 'MediaPlayer.html' with track=track %}

  <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>
{% 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 %}