{%- let name = Field::named("profile[display_name]", "Ada Lovelace") %}
{%- let email = Field { errors: vec!["must look like name@example.com".to_owned()], ..Field::named("profile[email]", "ada@") } %}
{%- let alerts = Field::named("profile[alerts]", "true") %}
<form style="display:grid;gap:20px;max-width:420px">
<fieldset class="ui-fieldset"><legend class="ui-legend">Profile</legend>
<.form_field field={name.clone()} description="This is how others see you in comments." required>
<input class="ui-input" id="{{ name.id }}" name="{{ name.name }}" value="{{ name.value }}" required aria-describedby="{{ name.id }}-description">
</.form_field>
<.form_field field={email.clone()}>
<input class="ui-input" type="email" id="{{ email.id }}" name="{{ email.name }}" value="{{ email.value }}" aria-invalid="true" aria-describedby="{{ email.id }}-error">
</.form_field>
<.form_field field={alerts.clone()} label="Email me about mentions" description="At most one a day." orientation="horizontal">
<input class="ui-checkbox" type="checkbox" id="{{ alerts.id }}" name="{{ alerts.name }}" value="true" checked aria-describedby="{{ alerts.id }}-description">
</.form_field>
</fieldset>
<div class="ui-row" style="justify-content:flex-end"><.button variant="outline" type="button">Cancel</.button><.button>Save profile</.button></div>
</form>