templates/index.html

{% extends 'layout.html' %}

{% block content %}

<form action="/contacts" method="get" class="tool-bar">
    <label for="search">Search Term</label>
    <input id="search" type="search" name="q"
        value="{{ request.args.get('q') or '' }}"/>
    <input type="submit" value="Search"/>
</form>
<table>
    <thead>
        <tr>
            <th>First name <th>Last name <th>Phone <th>Email </th>
        </tr>
    </thead>
    <tbody>
        {% for contact in contacts %}
            <tr>
                <td>{{ contact.first }}</td>
                <td>{{ contact.last }}</td>
                <td>{{ contact.phone }}</td>
                <td>{{ contact.email }}</td>
                <td> 
                    <a href="contacts/{{ contact.id }}/edit">Edit</a> 
                    <a href="contacts/{{ contact.id }}">View</a>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>
<p>
    <a href="/contacts/new">Add New Contact</a>
</p>

{% endblock %}