{% 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>
    <p>Deze link mag zowel naar open.spotify.com gaan als naar spotify.link</p>
    <input type="text" id="spotify-input" name="spotify_link" placeholder="Spotify-link">
    <input type="submit" value="Insturen">
</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 %}