first backend frontend split

with docker compose file
nextjs something something
also includes migrations

backend/playlist/templates/Settings.html

@@ -0,0 +1,74 @@
+{% extends "Base.html" %}
+
+{% block window-title %}
+Instellingen
+{% endblock %}
+
+{% block main-content %}
+  <p>Je bent ingelogd als <strong>{{ user.email }}</strong>.</p>
+  {% if user.is_staff %}
+  <form action="{% url 'admin:index' %}">
+    <div class="field-row settings">
+      <label>Administratieve achterkant:</label>
+      <input type="submit" value="" class="icon admin-panel" />
+    </div>
+  </form>
+  <form action="{% url 'playlist-import' %}" method="post">
+  {% csrf_token %}
+    <p>Geef een playlist url om oude nummers te importeren:</p>
+    <input type="text" id="spotify-input" name="playlist_link" placeholder="Spotify-link">
+    <input type="submit" value="Importeer">
+  </form>
+
+  {% comment %} {% if sptDisplayName %}
+  <form method="post">
+    {% csrf_token %}
+    <div class="field-row settings">
+      <label>Spotify gekoppeld:</label>
+      <span>{{sptDisplayName}}</span>
+      <input type="hidden" id="unlink-spotify" name="unlink-spotify" value="true" />
+      <input type="submit" id="spotify-cancel" value=""/>
+    </div>
+  </form>
+  {% else %}
+  <form action="{% url 'spotify-callback' %}">
+    <div class="field-row settings">
+      <label>Link je spotify:</label>
+      <input type="submit" value="" class="icon spotify" />
+    </div>
+  </form>
+  {% endif %} {% endcomment %}
+  {% endif %}
+  <form method="post">
+    {% csrf_token %}
+    {% if backgrounds %}
+    <div class="field-row settings">
+      <label for="wallpaper">Wallpaper:</label>
+      <select id="background" name="background" onchange="this.form.submit()">
+        {% for background in backgrounds %}
+          <option
+            value="{{background.id}}"
+            {% if background.id == currentBackground %} selected{% endif %}
+            >
+            {{background.name}}
+          </option>
+        {% endfor %}
+      </select>
+    </div>
+    {% endif %}
+  </form>
+  <div class="field-row settings">
+    <label>Nominatie quota:</label>
+    <span>{{user.profile.quota|floatformat:3}}</span>
+  </div>
+  <div id="average-stars" style="margin-top:10px;">
+    <fieldset>
+      <legend>Hoeveel sterren geef jij gemiddeld?</legend>
+      <div class="stars">
+        <div class="stars-overlay" style="width: calc({{average}} * 32px)">
+        </div>
+      </div>
+    </fieldset>
+    </div>
+  </div>
+{% endblock %}