{% comment %}
MD3 outlined field pair for a split phone number (see select.html for the
anatomy notes, duplicated here for the same reason single_select_search.html
duplicates it: the label/outline must wrap each control individually).

The control is a MultiWidget — a country-prefix <select> plus the national
number. Django's own widget draws each part ({% widget … part=… %}), with the
compound name and value the field reads back, and the form's attributes; the
help text and errors take Django's ids, which each part's aria-describedby
points at. The parts get one shell each rather than one shared outline; a
native <select> cannot ellipsis, so a long country name in a shared row hides
the number entirely.

Optional context:
    - prefix_label: label for the country-code shell (default "Country code",
      translated)
{% endcomment %}
{% load i18n phoxtail_core_tags %}
<div class="phx-field{% if field.errors %} phx-field--error{% endif %}">
    <fieldset class="phx-phone"{% if field.aria_describedby %} aria-describedby="{{ field.aria_describedby }}"{% endif %}>
        <legend class="phx-sr-only">{{ label|default:field.label }}</legend>
        <div class="phx-field__box phx-phone__prefix">
            {% widget field part=0 class="phx-field__control" htmx=htmx %}
            <label for="{{ field.auto_id }}_0" class="phx-field__label">{{ prefix_label|default:_("Country code") }}{% if show_required != False and required|default:field.field.required %}&nbsp;*{% endif %}</label>
            <fieldset class="phx-field__outline" aria-hidden="true">
                <legend class="phx-field__notch">
                    <span>{{ prefix_label|default:_("Country code") }}{% if show_required != False and required|default:field.field.required %}&nbsp;*{% endif %}</span>
                </legend>
            </fieldset>
            <svg class="phx-field__trailing" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M7 10l5 5 5-5z"/>
            </svg>
        </div>
        <div class="phx-field__box phx-phone__number">
            {% widget field part=1 class="phx-field__control" htmx=htmx %}
            {% if show_label != False and label != "" %}
                <label for="{{ field.auto_id }}_1" 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>
        </div>
    </fieldset>
    {% 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>