{% extends "layout.html" %}

{% block content %}

{% with messages = get_flashed_messages() %}
{% if messages %}
    {% for message in messages %}
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <p>{{message}}</p>
            
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% endfor %}
{% endif %}
{% endwith %}

    <form action="/add_contacto" method="POST">
        <div class="form-group">
            <label for="">Nombre</label>
            <input type="text" class="form-control" name="name" id="">
        </div>
        
        <div class="form-group">
            <label for="">Telefono</label>
            <input type="text" class="form-control" name="phone" id="">
        </div>

        <div class="form-group">
            <label for="">Email</label>
            <input type="text" class="form-control" name="email" id="">
        </div>

        <button type="submit" class="btn btn-success">Guardar</button>
    </form>

    <table class="table mt-4">
        <thead>
            <tr>
                <th>Name</th>
                <th>Telefono</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
        </thead>

        <tbody>
            {% for contact in contacts %}
                <tr>
                    <td>{{contact.1}}</td>
                    <td>{{contact.2}}</td>
                    <td>{{contact.3}}</td>
                    <td>
                        <a href="/edit/{{contact.0}}" class="btn btn-warning">Edit</a>
                        <a href="/delete/{{contact.0}}" class="btn btn-danger">delete</a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}}