{% extends "layout.html" %}

{% block content %}
    <form action="/contacts/{{contact.id}}/edit" method="post">
        <fieldset>
            <legend>Contact Values</legend>
            <p>
                <label for="email">Email</label>
                <input name="email" id="email" type="email"
                hx-get="'/contacts/{{contact.id}}/email"
                hx-target="next .error"
                placeholder="Email" value="{{contact.email or ''}}">
                {% if contact.errors.email %}
                <span class="error">{{ contact.errors.email}}</span>
                {% endif %}
            </p>
            <p>
                <label for="firstname">First Name</label>
                <input name="firstname" id="firstname" type="text" placeholder="First Name" value="{{contact.firstname or ''}}">
                {% if contact.errors.firstname %}
                <span class="error">{{ contact.errors.firstname}}</span>
                {% endif %}
            </p>
            <p>
                <label for="lastname">Last Name</label>
                <input name="lastname" id="lastname" type="text" placeholder="Last Name" value="{{contact.lastname or ''}}">
                {% if contact.errors.lastname %}
                <span class="error">{{ contact.errors.lastname}}</span>
                {% endif %}
            </p>
            <p>
                <label for="phone">Phone</label>
                <input name="phone" id="lastname" type="Phone" placeholder="Phone" value="{{contact.phone or ''}}">
                {% if contact.errors.phone %}
                <span class="error">{{ contact.errors.phone}}</span>
                {% endif %}
            </p>
            <input type="submit" value="Save"/>
        </fieldset>
    </form>
    <noscript>
        <form action="/contacts/{{contact.id}}/delete" method="post">
            <input type="submit" value="Delete"/>
        </form>
        <p>
            <a href="/contacts" role="button">Back</a>
        </p>
    </noscript>
    <div role="group">
        <button hx-get="/contacts" hx-target="body" hx-push-url="true">Back</button>
        <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</button>
    </div>
    
{% endblock %}