first backend frontend split

with docker compose file
nextjs something something
also includes migrations

backend/playlist/templates/Nominate.html

@@ -0,0 +1,45 @@
+{% 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 %}