{{define "content"}}
    {{- if not (eq .HTMX.Request.Target "contact")}}
        <article class="message is-link">
            <div class="message-body">
                <p>This is an example of a form with inline, server-side validation and HTMX-powered AJAX submissions without writing a single line of JavaScript.</p>
                <p>Only the form below will update async upon submission.</p>
            </div>
        </article>
    {{- end}}

    {{template "form" .}}
{{end}}

{{define "form"}}
    {{- if .Form.Submission.IsDone}}
        <article class="message is-large is-success">
            <div class="message-header">
                <p>Thank you!</p>
            </div>
            <div class="message-body">
                No email was actually sent but this entire operation was handled server-side and degrades without JavaScript enabled.
            </div>
        </article>
    {{- else}}
        <form id="contact" method="post" hx-post>
            <div class="field">
                <label for="email" class="label">Email address</label>
                <div class="control">
                    <input id="email" name="email" type="email" class="input {{.Form.Submission.GetFieldStatusClass "email"}}" value="{{.Form.Email}}">
                </div>
                {{template "field-errors" (.Form.Submission.GetFieldErrors "email")}}
            </div>

            <div class="field">
                <label for="message" class="label">Message</label>
                <div class="control">
                    <textarea id="message" name="message" class="textarea {{.Form.Submission.GetFieldStatusClass "message"}}">{{.Form.Message}}</textarea>
                </div>
                {{template "field-errors" (.Form.Submission.GetFieldErrors "message")}}
            </div>

            <div class="field is-grouped">
                <div class="control">
                    <button class="button is-link">Submit</button>
                </div>
            </div>

            {{template "csrf" .}}
        </form>
    {{- end}}
{{end}}