{% extends "testapp/base.html" %}

{% block template_name %}testapp/collection.html{% endblock %}

{% block content %}
    <div class="card">
        {% if collection.is_empty %}
            <h1>You have not added any guests</h1>
            <p class="lede">
                Each guest is its own run through the item wizard, registered
                before the wizard starts — which is what lets a half-finished
                one still have a row.
            </p>
        {% else %}
            <h1>You have added {{ collection.count }} guest{{ collection.count|pluralize }}</h1>
            <ul class="task-list">
                {% for row in collection.rows %}
                    <li class="task-list__item">
                        <span>{{ row.title }}</span>
                        <strong class="tag tag--{{ row.status }}">{{ row.status_label }}</strong>
                        <a href="{{ row.url }}">Change {{ row.title }}</a>
                        <a href="{{ row.remove_url }}">Remove {{ row.title }}</a>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
        {% comment %}
            The view reads one POST field, so two submit buttons carry the
            answer and the question needs no widget of its own. The errors
            still render: a POST that names neither is a malformed request
            rather than an unanswered question, and should say so.
        {% endcomment %}
        <form method="post">
            {% csrf_token %}
            {{ form.errors.add_another }}
            <button type="submit" name="add_another" value="yes">
                Add {% if collection.is_empty %}a{% else %}another{% endif %} guest
            </button>
            {% if not collection.is_empty %}
                <button type="submit" name="add_another" value="no">Continue</button>
            {% endif %}
        </form>
    </div>
{% endblock %}