{{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.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="{{url "contact.submit"}}">
            <div class="field">
                <label for="email" class="label">Email address</label>
                <div class="control">
                    <input id="email" name="email" type="email" class="input {{.Form.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}">
                </div>
                {{template "field-errors" (.Form.GetFieldErrors "Email")}}
            </div>

            <div class="control">
                <label class="label">Department</label>
                <label class="radio">
                    <input type="radio" name="department" value="sales" {{if eq .Form.Department "sales"}}checked{{end}}/>
                    Sales
                </label>
                <label class="radio">
                    <input type="radio" name="department" value="marketing" {{if eq .Form.Department "marketing"}}checked{{end}}/>
                    Marketing
                </label>
                <label class="radio">
                    <input type="radio" name="department" value="hr" {{if eq .Form.Department "hr"}}checked{{end}}/>
                    HR
                </label>
                {{template "field-errors" (.Form.GetFieldErrors "Department")}}
            </div>

            <div class="field">
                <label for="message" class="label">Message</label>
                <div class="control">
                    <textarea id="message" name="message" class="textarea {{.Form.GetFieldStatusClass "Message"}}">{{.Form.Message}}</textarea>
                </div>
                {{template "field-errors" (.Form.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}}