{% 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 %}