{% comment %}
Renders a single register field. Driven by AUTH_REGISTER_FIELDS via
register_schema.resolve_fields(); see mojo/apps/account/services/register_schema.py
for the canonical field set and shape.

Input context:
    f.name      — one of: first_name, last_name, email, phone, dob, password
    f.required  — bool
    f.verify    — "sms" / "email" / None
{% endcomment %}
{% if f.name == "first_name" %}
<div class="mat-field">
    <input class="mat-input" type="text" id="reg-first-name" autocomplete="given-name" placeholder="First name"{% if f.required %} required{% endif %} />
</div>
{% elif f.name == "last_name" %}
<div class="mat-field">
    <input class="mat-input" type="text" id="reg-last-name" autocomplete="family-name" placeholder="Last name"{% if f.required %} required{% endif %} />
</div>
{% elif f.name == "email" %}
<div class="mat-field">
    <input class="mat-input" type="email" id="reg-email" autocomplete="email" placeholder="Email"{% if f.required %} required{% endif %} />
</div>
{% elif f.name == "phone" %}
<div class="mat-field">
    <input class="mat-input" type="tel" id="reg-phone" autocomplete="tel" placeholder="Phone number"{% if f.required %} required{% endif %} />
</div>
{% elif f.name == "dob" %}
{% include "account/_dob_segments.html" %}
{% elif f.name == "password" %}
<div class="mat-field">
    <div class="mat-input-wrap">
        <input class="mat-input has-eye" type="password" id="reg-password" autocomplete="new-password" placeholder="Enter your password"{% if f.required %} required{% endif %} />
        <button type="button" class="mat-eye" aria-label="Show password" data-target="reg-password">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
        </button>
    </div>
</div>
{% endif %}