{% extends "Base.html" %}

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

{% block main-content %}
<form method="post">
    {% csrf_token %}
    <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%}>
</form>
{% if nominated or error or warning %}
    <script>
        function hidePopup() {
            document.getElementById("info-window").classList.add("hide");
        }
    </script>
    <div class="window popup" id="info-window">
        <div class="title-bar">
            <div class="title-bar-text">
                {% if nominated %}
                    {{nominated}}
                {% elif error %}
                    Error
                {% else %}
                    Let op!
                {% endif %}
            </div>
            <div class="title-bar-controls">
                <button aria-label="Close" onclick="hidePopup()"></button>
            </div>
        </div>
        <div class="window-body">
            <div class="icon {% if warning %}warning{% elif error %}error{% endif %}"></div>
            <div class="text">
                <div>
                    {{warning}}
                    {{error}}
                    {% if not error %}Genomineerd!{% endif %}
                </div>
                <section class="field-row" style="justify-content: flex-end">
                    <button onclick="hidePopup()">Ok</button>
                </section>
            </div>
        </div>
    </div>
{% endif %}
{% 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>
{% endblock %}