Refactors en stemmen werkt

playlist/templates/SpotifyEmbed.html

@@ -1,6 +1,35 @@
-<div id="vote-box" hx-boost="true" hx-target="#vote-box">
-  <iframe src="https://open.spotify.com/embed/track/{{ id }}"
+{% 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="300" height="380" frameborder="0" allowtransparency="true" 
   allow="encrypted-media"></iframe>
-  <a href="{% url 'vote-track'%}">Ja</a> | <a href="{% url 'vote-track' %}">Nee</a>
+  <div id="vote-buttons" hx-vals='{"spotify_id": "{{ track.id }}"}'>
+    <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>
+  </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 %}