{% macro country_phone_field(form, phone_placeholder="Ingresa tu número") %}
<div class="country-phone-field">
  <label class="field-label" for="phone">País y número</label>
  <div class="field-shell">
    <span class="field-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.1 19.1 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .6 2.9a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6.2 6.2l1.1-1.1a2 2 0 0 1 2.1-.5c.9.3 1.9.5 2.9.6A2 2 0 0 1 22 16.9Z"></path>
      </svg>
    </span>
    <div class="country-wrap" data-country-picker>
      <input type="hidden" name="{{ form.country_code.name }}" value="{{ form.country_code.data or 'MX' }}" data-country-value>
      <button
        type="button"
        class="country-trigger"
        data-country-trigger
        aria-label="Seleccionar país"
        aria-expanded="false"
        aria-haspopup="listbox"
      >
        <img
          src="https://flagcdn.com/20x15/mx.png"
          alt="México"
          class="country-flag-img"
          data-country-flag-img
          width="20"
          height="15"
        >
        <span class="country-dial" data-country-dial>+52</span>
        <span class="country-caret" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="#4c0927" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="m6 9 6 6 6-6"></path>
          </svg>
        </span>
      </button>
      <div class="country-menu" data-country-menu role="listbox" aria-label="Países disponibles">
        {% for country in latin_america_countries %}
          <button
            type="button"
            class="country-option{% if (form.country_code.data or 'MX') == country.code %} active{% endif %}"
            data-country-option="{{ country.code }}"
            data-country-dial="{{ country.dial }}"
            data-country-name="{{ country.name }}"
            role="option"
          >
            <img src="https://flagcdn.com/24x18/{{ country.code|lower }}.png" alt="" class="country-flag-img" width="24" height="18" loading="lazy">
            <span class="country-option-name">{{ country.name }}</span>
            <span class="country-option-dial">{{ country.dial }}</span>
          </button>
        {% endfor %}
      </div>
    </div>
    {{ form.phone(class="field-input phone-input", placeholder=phone_placeholder, maxlength="15", inputmode="numeric", pattern="[0-9]{6,15}") }}
  </div>
  {% for error in form.phone.errors %}
    <p class="mt-1 error-text">{{ error }}</p>
  {% endfor %}
  {% for error in form.country_code.errors %}
    <p class="mt-1 error-text">{{ error }}</p>
  {% endfor %}
</div>
{% endmacro %}