{% extends "layout.html" %}



{% block error %}
    {% if error_message %}
    <div class="py5 alert alert-info text-center" role="alert">
        {{ error_message }}
    </div>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="container">
            <div class="py-5 text-center">
                <h1>Votre liste de course</h1>
            </div>

            <div class="py-5 text-center">                
                <form method="post" action="/add" style="display: inline-block">
                    <input type="text" name="item" id="item">
                    <input type="submit" value="Ajouter" name="add" class="btn btn-primary">
                </form>
                <form method="post" action="/clear"  style="display: inline-block">
                    <input type="submit" value="Tout supprimer" name="clear" class="btn btn-danger">
                </form>
            </div>
        
            <div class="py-5">
                <ul class="list-group">
                    {% for item in items %}
                    <li>{{ item }}</li>
                    {%  endfor %}
                </ul>
            </div>
    </div>
{% endblock %}