{{define "edit.html"}}
    <h1>EDIT</h1>
{% 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"
                           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"
            hx-delete="/contacts/{{ .contact.ID }}"
            hx-push-url="true"
            hx-confirm="Are you sure you want to delete this contact?"
            hx-target="body">
        Delete Contact
    </button>

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

{{ end }}
{{end}}