{% extends "pretalx_musicrate/submission_base.html" %}
{% load i18n %}
{% load static %}

{% block submission_header %}
    <link rel="stylesheet" type="text/css" href="{% static "pretalx_musicrate/rating.css" %}">
    <script defer src="{% static "pretalx_musicrate/rating.js" %}"></script>
{% endblock %}

{% block submission_content %}
    <form method="post">
        {% csrf_token %}
        <div class="d-flex justify-content-center">
            <div class="rating-container">
                <div class="rating" style="--num-choices: {{ form.rating | length }}">
                    {% for radio in form.rating %}
                        {{ radio.tag }}
                        <label class="rating-point" for="{{ radio.id_for_label }}"></label>
                    {% endfor %}
                </div>
                <div class="legend">
                    <span>sehr schlecht</span>
                    <span>sehr neutral</span>
                    <span>sehr gut</span>
                </div>
            </div>
        </div>
        <div class="submit-group">
            <span>
                <button class="btn btn-danger btn-lg" id="reset_rating" type="reset">Zurücksetzen</button>
            </span>
            <span>
                <button class="btn btn-success btn-lg" id="submit_rating" type="submit">Speichern</button>
            </span>
        </div>
    </form>
{% endblock %}