{# Step 2: Location #}
<form hx-post="{{ url_for('leads.quote_step', step=2) }}"
      hx-target="#quote-step" hx-swap="innerHTML">
  <input type="hidden" name="_accumulated" value='{{ data | tojson }}'>
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

  <h2 class="q-step-title">{{ t.q2_heading }}</h2>
  <p class="q-step-sub">{{ t.q2_subheading }}</p>

  <div class="q-field-group">
    <label class="q-label" for="city">{{ t.q2_city_label }}</label>
    <input type="text" id="city" name="city" class="q-input" placeholder="{{ t.q2_city_placeholder }}" value="{{ data.get('city', '') }}">
  </div>

  <div class="q-field-group">
    <label class="q-label" for="country">{{ t.q2_country_label }} <span class="required">*</span></label>
    {% if 'country' in errors %}<p class="q-error-hint">{{ t.q2_error_country }}</p>{% endif %}
    <select id="country" name="country" class="q-input {% if 'country' in errors %}q-input--error{% endif %}">
      <option value="">{{ t.q2_country_default }}</option>
      {% for code, name in [('DE', 'Germany'), ('ES', 'Spain'), ('IT', 'Italy'), ('FR', 'France'), ('NL', 'Netherlands'), ('SE', 'Sweden'), ('UK', 'United Kingdom'), ('PT', 'Portugal'), ('BE', 'Belgium'), ('AT', 'Austria'), ('CH', 'Switzerland'), ('DK', 'Denmark'), ('FI', 'Finland'), ('NO', 'Norway'), ('PL', 'Poland'), ('CZ', 'Czech Republic'), ('AE', 'UAE'), ('SA', 'Saudi Arabia'), ('US', 'United States'), ('OTHER', 'Other')] %}
      <option value="{{ code }}" {{ 'selected' if data.get('country') == code }}>{{ name }}</option>
      {% endfor %}
    </select>
  </div>

  <div class="q-nav">
    <button type="button" class="q-btn-back"
            hx-get="{{ url_for('leads.quote_step', step=1, _accumulated=data | tojson) }}"
            hx-target="#quote-step" hx-swap="innerHTML">{{ t.q_btn_back }}</button>
    <button type="submit" class="q-btn-next">{{ t.q_btn_next }}</button>
  </div>
</form>

<div id="q-progress" hx-swap-oob="innerHTML">
  <div class="q-progress__meta">
    <span class="q-progress__label">{{ steps[step - 1].title }}</span>
    <span class="q-progress__count">{{ t.q_step_counter | tformat(step=step, total=steps|length) }}</span>
  </div>
  <div class="q-progress__track">
    <div class="q-progress__fill" style="width: {{ (step / steps|length * 100) | round }}%"></div>
  </div>
</div>
