{% extends "base.html" %}
{% block content %}
<div class="columns">
    <div class="column col-md-12 col-mx-auto col-4">
        <h1>Welkom {{user.username}}!</h1>
        <h2>Voeg een nieuw feest toe</h2>
        <div>
            <label for="party_name">Feest Naam:</label>
            <input type="text" id="party_name" name="party_name" placeholder="Feest Naam">
        </div>
        <div>
            <button class="btn btn-primary" id="add_party">Voeg toe</button>
        </div>

        <h2>Kies een al bestaand feest</h2>

        {% for party in parties %}
        <div class="column col-12 bg-secondary text-primary text-center"><a href="/party/{{ party.id }}"
                class="text-large">{{ party.name }}</a></div>
        {% if !loop.last %}
        <div class="divider text-center"></div>
        {% endif %}

        {% else %}
        <div class="column col-12 bg-secondary text-primary text-center">
            <p class="text-large">Nog geen feesten aangemaakt!</p>
        </div>
        {% endfor %}

    </div>
</div>

<script>
    document.getElementById("add_party").addEventListener("click", function () {
        var party_name = document.getElementById("party_name").value;
        fetch("/api/party", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                name: party_name
            })
        }).then(function (response) {
            return response.json();
        }).then(function (data) {
            window.location.href = "/party/" + data.id;
        });
    });

</script>
{% endblock %}