{% extends "layout.html" %}



{% block error %}
    {%if error_item %}
    <div class="py5 alert alert-info" role="alert">
        l'item {{ error_item }} est déjà dans la liste
    </div>
    {% endif %}
{% endblock %}

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

            <div class="py-5 text-center">                
                <form method="POST" action="/add/">
                    <input type="text" name="item" id="item">
                    <input type="submit" value="Ajouter" name="add" class="btn btn-primary">

                </form>

            </div>
        
            <div class="py-5">
                <ul class="list-group">
                    {% for item in items %}
                    <li class="list-group-item">
                        {{ item['name'] }} <a href="/delete/{{ item['id'] }}" style="float:right; color: #ff4a4a">supprimer</a>
                    </li >
                    {% endfor %}
                </ul>

            </div>
    </div>
{% endblock %}