{% macro gate_hero() %}
<header class="gate-hero" role="banner" aria-label="Presentación">
  <span class="gate-hero__brand">{{ brand_short_name }}</span>
</header>
{% endmacro %}

{% macro gate_country_phone_field(form) %}
<div class="gate-field country-phone-field">
  <div class="gate-field-shell gate-phone-shell">
    <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 gate-country-trigger" data-country-trigger aria-label="Seleccionar país y lada" aria-expanded="false" aria-haspopup="listbox">
        <img src="https://flagcdn.com/24x18/mx.png" alt="México" class="country-flag-img" data-country-flag-img width="24" height="18">
        <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="currentColor" 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="gate-field-input gate-phone-input", placeholder="Número de teléfono", inputmode="numeric", autocomplete="tel-national", minlength="8", maxlength="13", pattern="[0-9]{8,13}") }}
  </div>
  {% for error in form.country_code.errors %}<p class="gate-error">{{ error }}</p>{% endfor %}
  {% for error in form.phone.errors %}<p class="gate-error">{{ error }}</p>{% endfor %}
</div>
{% endmacro %}

{% macro gate_phone_field(form) %}
<div class="gate-field">
  <div class="gate-field-shell">
    <span class="gate-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.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"></path>
      </svg>
    </span>
    {{ form.phone(
      class="gate-field-input",
      placeholder="Ingresa tu número de teléfono",
      inputmode="tel",
      autocomplete="tel",
      maxlength="15"
    ) }}
  </div>
  {% for error in form.phone.errors %}
    <p class="gate-error">{{ error }}</p>
  {% endfor %}
</div>
{% endmacro %}

{% macro gate_password_field(form, field_id='password', placeholder='Ingresa tu contraseña', autocomplete='current-password') %}
<div class="gate-field">
  <div class="gate-field-shell">
    <span class="gate-field-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="4" y="10" width="16" height="10" rx="2"></rect>
        <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>
      </svg>
    </span>
    {{ form.password(
      class="gate-field-input",
      id=field_id,
      placeholder=placeholder,
      autocomplete=autocomplete
    ) }}
    <button type="button" class="gate-toggle-pwd" data-toggle-password="{{ field_id }}" aria-label="Mostrar u ocultar contraseña">
      <svg class="icon-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"></path><circle cx="12" cy="12" r="3"></circle></svg>
      <svg class="icon-eye-off" hidden viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-6.94"></path><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
    </button>
  </div>
  {% for error in form.password.errors %}
    <p class="gate-error">{{ error }}</p>
  {% endfor %}
</div>
{% endmacro %}

{% macro gate_invite_field(form) %}
<div class="gate-field">
  <div class="gate-field-shell">
    <span class="gate-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="M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"></path>
        <path d="M4 7h16v5H4z"></path>
        <path d="M12 22V7"></path>
        <path d="M8 7V5a4 4 0 0 1 8 0v2"></path>
      </svg>
    </span>
    {{ form.invitation_code(
      class="gate-field-input",
      id="invitation_code",
      placeholder="Código de invitación (obligatorio)",
      autocomplete="off",
      required=true
    ) }}
  </div>
  {% for error in form.invitation_code.errors %}
    <p class="gate-error">{{ error }}</p>
  {% endfor %}
</div>
{% endmacro %}

{% macro gate_flashes() %}
{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <p class="gate-flash gate-flash--{{ 'error' if category == 'error' else 'success' }}">{{ message }}</p>
    {% endfor %}
  {% endif %}
{% endwith %}
{% endmacro %}