{% comment %}
Segmented control: one segment per choice of the form field, a sliding
thumb under the chosen one (styled in forms/fields.css, up to five segments).
Sized to the shared MD3 field height (56dp) so it can sit in a form row next
to outlined fields. The form's RadioSelect draws each radio through
segmented_control/options.html and segmented_control/option.html, so
values, the checked segment, ids, disabled and every hx_* option reach each
input; the chosen radio submits its own value. A disabled form field greys
the whole control. Help text and errors render as MD3 supporting text.
Looks: outlined + large (default, for forms) or variant="filled"
size="small" (a pill, for toolbars and page headers).
{% endcomment %}
{% load phoxtail_core_tags %}
<div class="phx-field{% if field.errors %} phx-field--error{% endif %}">
    {% if show_label != False and label|default:field.label %}
        <span class="phx-field__group-label">
            {{ label|default:field.label }}{% if show_required != False and required|default:field.field.required %}&nbsp;*{% endif %}
        </span>
    {% endif %}
    {% with variant=variant|default:"outlined" size=size|default:"large" %}
        <div class="phx-segmented-control phx-segmented-control--{{ variant }} phx-segmented-control--{{ size }}{% if field.field.disabled %} phx-segmented-control--locked{% endif %}"
             style="--phx-segmented-control-count: {{ field.field.choices|length }}">
            <div class="phx-segmented-control__track">
                {% widget field class="phx-segmented-control__radio" template_name="phoxtail_core/forms/fields/segmented_control/options.html" option_template_name="phoxtail_core/forms/fields/segmented_control/option.html" htmx=htmx %}
                <div class="phx-segmented-control__slider"></div>
            </div>
        </div>
    {% endwith %}
    {% 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>