{% with prefix=widget.subwidgets.0 number=widget.subwidgets.1 %}<div class="phone-input join w-full"{% if widget.attrs.id %} id="{{ widget.attrs.id }}_phone"{% endif %} x-data="{
  open: false,
  value: '{{ prefix.value|default:'' }}',
  label: '',
  choices: [{% for val, lbl in widget.prefix_choices %}['{{ val|escapejs }}','{{ lbl|escapejs }}']{% if not forloop.last %},{% endif %}{% endfor %}],
  init() {
    const match = this.choices.find(c => c[0] === this.value);
    this.label = match ? match[1] : this.value;
  },
  pick(val, lbl) {
    this.value = val;
    this.label = lbl;
    this.open = false;
    this.$refs.hidden.value = val;
    this.$refs.hidden.dispatchEvent(new Event('change', {bubbles: true}));
  }
}" @click.away="open = false">
  <input x-ref="hidden" type="hidden" name="{{ prefix.name }}" value="{{ prefix.value|default:'' }}"{% if prefix.attrs.id %} id="{{ prefix.attrs.id }}"{% endif %}>
  <button type="button" class="phone-prefix-trigger join-item" @click="open = !open" x-text="label"></button>
  <ul x-show="open" x-cloak class="phone-prefix-menu dropdown-content menu bg-base-100 rounded-box shadow-lg border border-base-300 max-h-60 overflow-y-auto p-1 flex-nowrap z-10">
    <template x-for="[val, lbl] in choices" :key="val">
      <li><a class="text-sm px-2 py-1" @click.prevent="pick(val, lbl)" x-text="lbl" :class="{ 'active': val === value }"></a></li>
    </template>
  </ul>
  {% include number.template_name with widget=number %}
</div>{% endwith %}