{% comment %}
MD3 outlined text field for every box the form's widget draws — text,
numbers, dates, date-times: the widget decides the type (see select.html for
the anatomy notes). A date or date-time box never matches :placeholder-shown,
so its label is permanently floated; the browser's picker indicator is
hidden in CSS and the trailing calendar (or, for a time box, clock) button
opens the picker instead. A
password box gets the show/hide button (js/fields.js), named after its field;
like Django, it never writes the typed value back, unless the form's widget
says render_value (a secret shown once, read-only, beside copy=True). Django's own
widget draws the control, so it carries what the form declares: the value
formatted for the active language, type, required, disabled, maxlength,
autocomplete, and the aria-describedby link to the line under it (Django's
ids: <id>_helptext, <id>_error). The label rests inside the container and floats into the
outline notch on focus/populate, driven by :placeholder-shown — hence the
single-space placeholder fallback. A caller-supplied placeholder is kept but
only becomes visible on focus (CSS hides it while the label rests in its
place, per MD3). input_type overrides the widget's type. Any hx_* option
reaches the control; the htmx settings are written only when it makes a
request (hx_get, hx_post, hx_put, hx_patch, hx_delete). copy=True adds a
trailing button that copies the box's value (js/fields.js), for a value to
read and take, such as a key; on a disabled field (Django's read-only: the
form keeps its initial value, whatever is posted) the button stays live.
{% endcomment %}
{% load i18n phoxtail_core_tags phoxtail_design_tags %}
<div class="phx-field{% if field.errors %} phx-field--error{% endif %}">
    <div class="phx-field__box">
        {% widget field class="phx-field__control" placeholder=placeholder|default:" " input_type=input_type autofocus=autofocus htmx=htmx %}
        {% if show_label != False and label != "" %}
            <label for="{{ field.id_for_label }}" class="phx-field__label">
                {{ label|default:field.label }}{% if show_required != False and required|default:field.field.required %}&nbsp;*{% endif %}
            </label>
        {% endif %}
        <fieldset class="phx-field__outline" aria-hidden="true">
            <legend class="phx-field__notch{% if show_label == False or label == "" %} phx-field__notch--empty{% endif %}">
                {% if show_label != False and label != "" %}<span>{{ label|default:field.label }}{% if show_required != False and required|default:field.field.required %}&nbsp;*{% endif %}</span>{% endif %}
            </legend>
        </fieldset>
        {% if trailing == "eye" %}
            <button type="button"
                    class="phx-field__trailing-button"
                    aria-label="{% blocktranslate with label=label|default:field.label %}Show {{ label }}{% endblocktranslate %}"
                    aria-pressed="false"
                    data-password-toggle>
                <span class="phx-input__password-eye phx-input__password-eye--show">{% icon "visibility" %}</span>
                <span class="phx-input__password-eye phx-input__password-eye--hide" style="display:none">
                    {% icon "visibility_lock" %}
                </span>
            </button>
        {% endif %}
        {% if copy %}
            <button type="button"
                    class="phx-field__trailing-button"
                    aria-label="{% blocktranslate with label=label|default:field.label %}Copy {{ label }}{% endblocktranslate %}"
                    data-copy>
                <span class="phx-field__copy-icon">{% icon "content_copy" %}</span>
                <span class="phx-field__copy-icon phx-field__copy-icon--done" style="display:none">{% icon "check" %}</span>
            </button>
        {% endif %}
        {% if trailing == "calendar" and not field.field.disabled %}
            <button type="button" class="phx-field__trailing-button" tabindex="-1" aria-hidden="true" data-picker-open>
                {% icon "calendar_today" %}
            </button>
        {% endif %}
        {% if trailing == "clock" and not field.field.disabled %}
            <button type="button" class="phx-field__trailing-button" tabindex="-1" aria-hidden="true" data-picker-open>
                {% icon "schedule" %}
            </button>
        {% endif %}
    </div>
    {% if supporting == "errors" %}
        <div class="phx-field__supporting"{% if field.auto_id %} id="{{ field.auto_id }}_error"{% endif %}>
            {% for error in field.errors %}<span>{{ error }}</span>{% endfor %}
        </div>
    {% elif supporting == "help" %}
        <div class="phx-field__supporting"{% if field.auto_id %} id="{{ field.auto_id }}_helptext"{% endif %}>{{ help_text|default:field.help_text }}</div>
    {% endif %}
</div>