edit.html

{% extends 'layout.html' %}

{% block content %}

    <form action="/contacts/{{ contact.id }}/edit" method="post">
        <fieldset>
            <legend>Contact Values</legend>
            <div class="table rows">
                <p>
                    <label for="email">Email</label>
                    <input name="email" id="email" type="email"
                           hx-get="/contacts/{{ contact.id }}/email" hx-target="next .error"
                           hx-trigger="change, keyup delay:200ms changed"
                           placeholder="Email" value="{{ contact.email }}">
                    <span class="error">{{ contact.errors['email'] }}</span>
                </p>
                <p>
                    <label for="first_name">First Name</label>
                    <input name="first_name" id="first_name" type="text" placeholder="First Name"
                           value="{{ contact.first }}">
                    <span class="error">{{ contact.errors['first'] }}</span>
                </p>
                <p>
                    <label for="last_name">Last Name</label>
                    <input name="last_name" id="last_name" type="text" placeholder="Last Name"
                           value="{{ contact.last }}">
                    <span class="error">{{ contact.errors['last'] }}</span>
                </p>
                <p>
                    <label for="phone">Phone</label>
                    <input name="phone" id="phone" type="text" placeholder="Phone" value="{{ contact.phone }}">
                    <span class="error">{{ contact.errors['phone'] }}</span>
                </p>
            </div>
            <button>Save</button>
        </fieldset>
    </form>

    <button id="delete-btn"
            class="bad bg color border"
            hx-delete="/contacts/{{ contact.id }}"
            hx-push-url="true"
            hx-trigger="confirmed"
            hx-target="body"
            @click="sweetConfirm($el, {
                title: 'Delete this contacts?',
                showCancelButton: true,
                confirmButtonText: 'Delete'
            })">
        Delete Contact
    </button>

    <p>
        <a href="/contacts">Back</a>
    </p>

{% endblock %}