{% extends "Base.html" %}

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

{% block main-content %}
<form method="post">
    {% csrf_token %}
    {% if user.profile.can_nominate.0 %}
      <p>Vul een spotify link in om een nummer te nomineren.</p>
      <input type="text" id="spotify-input" name="spotify_link" placeholder="Spotify-link">
      <input type="submit" value="Insturen" {% if user.profile.quota < 1%}disabled{%endif%}>
    {% elif user.profile.can_nominate.1 == 'quota' %}
      <p>Je quotum is op. Je zal helaas eventjes moeten wachten met nomineren.</p>
    {% elif user.profile.can_nominate.1 == 'over' %}
      <p>Het nomineren is voorbij voor dit jaar! Bedankt voor de inzendingen.</p>
    {% endif %}
</form>

{% endblock %}

{% block status-bar%}
<div class="status-bar">
    <div
        class="status-bar-field progress-indicator segmented"
        title="{{user.profile.quota | floatformat:2}} nominaties over."
        >
        <span class="progress-indicator-bar" style="width: calc({{user.profile.quota | floatformat:0}} * 18px);" />
    </div>
    <p class="status-bar-field">{{user.profile.quota_display}} nominaties over.</p>
</div>
<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-06-25T23:59:59+02:00");
    startCountdown("{{user.profile.nominate_end}}");
  });
</script>
{% endblock %}