htmx_contact/htmx_contact/templates/contacts.html

{% extends 'base.html' %}

{% block content %}
<div class="container">
    <h1>Contact.app</h1>
    <div class="width-60">
        <div class="flex-row flex-space-betw">
            <form action="/contacts" method="get">
                <!-- <label for="search">Search Term</label> -->
                <input class="width-375-px" id="search" type="text" name="q", placeholder="&#128269;..." value="{{ request.args.get('q') or '' }}">
                <input class="button" type="submit", value="Search">
            </form>
            <span><a class="button" href="/contacts/new">Add Contact</a></span>
        </div>
    <table>
        <thead>
            <th>First</th>
            <th>Last</th>
            <th>Phone</th>
            <th>Email</th>
        </thead>
        <tbody>
            {% for contact in contacts %}
            <tr>
                <td>{{ contact.first_name }}</td>
                <td>{{ contact.last_name }}</td>
                <td>{{ contact.phone }}</td>
                <td>{{ contact.email }}</td>
                <td><a href="/contacts/{{ contact.id }}/edit">Edit</a></td>
                <td><a href="/contacts/{{ contact.id }}">View</a></td>

            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
</div>
{% endblock %}