{% props field: Field, label: String = "", autocomplete: String = "current-password", description: String = "" %}
{#- autocomplete: "current-password" to sign in, "new-password" to create one. The controller reveals Show. #}
{%- let label = if label.is_empty() { field.label.clone() } else { label } %}
{%- let note = if field.has_errors() { format!("{}-error", field.id) } else { format!("{}-description", field.id) } %}
<div class="ui-field" data-ui="password">
<label class="ui-label" for="{{ field.id }}">{{ label }}</label>
<div class="ui-password">
<input class="ui-input" id="{{ field.id }}" name="{{ field.name }}" type="password" autocomplete="{{ autocomplete }}" spellcheck="false" autocapitalize="none"{% if field.has_errors() || !description.is_empty() %} aria-describedby="{{ note }}"{% end %}{% if field.has_errors() %} aria-invalid="true"{% end %}>
<button class="ui-btn" data-variant="outline" type="button" aria-controls="{{ field.id }}" hidden>Show</button>
</div>
{%- if field.has_errors() %}
<p class="ui-field-error" id="{{ field.id }}-error">{%- for message in field.errors.iter() %}{{ label }} {{ message }}. {% end %}</p>
{%- else %}{% if !description.is_empty() %}
<p class="ui-field-description" id="{{ field.id }}-description">{{ description }}</p>
{%- end %}{% end %}
</div>