{% extends "base.html" %}
{% block content %}
<main class="col-md-4 ms-sm-auto col-lg-10 px-md-4">
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">People</h1>
    </div>

    <div class="row">
        <div class="col-md-4">
            <h3>Add Person</h3>
            <form method="post">
                {% csrf_token %}
                {{ form.as_p }}
                <input type="submit" value="Save">
            </form>
        </div>

        <div class="col-md-8">
            <h3>Your People</h3>
            <ul>
                {% for person in people %}
                <li>
                    {{ person.name }}
                    <a href="{% url 'people:person_edit' person.pk %}">Edit</a>
                </li>
                {% empty %}
                <li>No people yet.</li>
                {% endfor %}
            </ul>
        </div>
    </div>
</main>
{% endblock %}