{% extends 'layout.html' %}

{% block content %}

<form action="/contacts/{{ contact.id }}/edit" method="post">
    <fieldset>
        <legend>Contact Info</legend>
        <p>
            <label for="email">Email</label>
            <input name="email" id="email" type="text" placeholder="Email" value="{{ contact.email }}"/>
            <span class="error">{{ contact.errors["email"] }}</span>
        </p>
        <p>
            <label for="first">First Name</label>
            <input name="first" id="first" type="text" placeholder="First Name" value="{{ contact.first }}"/>
            <span class="error">{{ contact.errors["first"] }}</span>
        </p>
        <p>
            <label for="last">Last Name</label>
            <input name="last" id="last" 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="phone">{{ contact.errors["phone"]}}</span>
        </p>
        <button>Save</button>
    </fieldset>
</form>
<button 
    hx-delete="/contacts/{{ contact.id }} " 
    hx-target="body"
    hx-push-url="true"
    hx-confirm="Are you sure you want to delete this contact?">
Delete Contact
</button>
<p>
    <a href="/contacts">Back</a>
</p>
{% endblock %}