{% extends "base.html" %}

{% block title %}Index Page{% endblock %}

{% block content %}
<ul>
    {% for person in people %}
    <li>{{ person }} <button onclick="deletePerson({{ person.pid }})">Delete</button></li> 
    {% endfor %}
</ul>

<h3> New Person </h3> 
<form action="{{ url_for('index') }}" method='POST'>
    <input type="text" name="name" palceholder="Name" required="required"><br>
    <input type="number" name="age" palceholder="Age"><br>
    <input type="text" name="job" palceholder="Job"><br>
    <input type="submit" value="Create"><br>
</form>

<script type="text/javascript"> 
    function deletePerson(pid){
        fetch('{{ url_for("delete", pid=pid) }}' + pid, {
        method: 'DELETE'
        }).then(response => {
            if (response.ok) {
                window.location.reload();
            }else{
                console.error('Failed to delete pid : ', pid);
            }
        })
        .catch(error => {
            console.error('Error during fetching', error);
        });
    }
</script>



{% endblock %}