{% extends "Base.html" %}

{% block window-title %}
Stemmen{% if vote_left or skip_left %}: {{vote_left|add:skip_left}} te gaan.{% endif %}
{% endblock %}

{% block main-content %}
{% if user.profile.can_vote %}
  {% 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": "1"}'
            hx-post="{% url 'vote' %}"
          ></a>
          <a
            hx-vals='{"vote": "2"}'
            hx-post="{% url 'vote' %}"
          ></a>
          <a
            hx-vals='{"vote": "3"}'
            hx-post="{% url 'vote' %}"
          ></a>
          <a
            hx-vals='{"vote": "4"}'
            hx-post="{% url 'vote' %}"
          ></a>
          <a
            hx-vals='{"vote": "5"}'
            hx-post="{% url 'vote' %}"
          ></a>
        </div>
      </fieldset>
      <div class="skip-wrapper">
        {% if not skipped %}
          {% csrf_token %}
          <button class="skip" hx-post="{% url 'skip' %}" >Skip</button>
        {% endif %}
      </div>
      <div class="undo-wrapper"  hx-vals='{"spotify_id": "{{ undo.track.id }}"}' >
      {% if undo %}
          {% csrf_token %}
          <p>Je hebt {{undo.track}} een score van {{undo.points}} sterren gegeven!</p>
          <button class="undo" hx-post="{% url 'undo' %}" >Undo</button>
      {% endif %}
      </div>
    </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>
    {% if undo %}
      <!--<form class="undo-wrapper" method="post" action="{% url 'undo' %}" hx-vals='{"spotify_id": "{{ undo.track.id }}"}' >-->
      <div class="undo-wrapper" hx-target="body" hx-vals='{"spotify_id": "{{ undo.track.id }}"}' >
        {% csrf_token %}
        <p>Je hebt {{undo.track}} een score van {{undo.points}} sterren gegeven!</p>
        <button class="undo" hx-post="{% url 'undo' %}" >Undo</button>
      </div>
    {% endif %}
  {% endif %}
{% else %}
<p> Stemmen is voorbij. Joe.</p>
{% endif %}
{% endblock %}

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

{% block status-bar%}
<div class="status-bar" id="countdown">
    <p class="status-bar-field"><span id="days"></span> dagen</p>
    <p class="status-bar-field"><span id="hours"></span> uur</p>
    <p class="status-bar-field"><span id="minutes"></span> minuten</p>
    <p class="status-bar-field"><span id="seconds"></span> seconden</p>
</div>
<script>
  document.body.addEventListener('htmx:load', function(evt) {
    //startCountdown("2024-08-25T23:59:59+02:00");
    startCountdown("{{user.profile.vote_end}}");
  });
</script>
{% endblock %}