{% if track %}
<div id="vote-box" hx-target="#vote-box">
  {% if error %}<div class="error">{{ error }}</div>{% endif %}
  <iframe src="https://open.spotify.com/embed/track/{{ track.id }}"
  class="play-sample"
  width="100%"
  height="352"
  frameborder="0"
  allow="encrypted-media"></iframe>
  <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>
{% 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 %}