{# Step 1: Your Project #}
<form hx-post="{{ url_for('leads.quote_step', step=1) }}"
      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.q1_heading }}</h2>
  {% if data.get('facility_type') %}
  <p class="q-step-sub">
    {{ t.q1_prefill_sub }}
    <a href="{{ url_for('planner.index') }}" target="_blank" rel="noopener"
       style="color:#1D4ED8;font-weight:500;white-space:nowrap">{{ t.q1_edit_in_planner }} ↗</a>
  </p>
  {% else %}
  <p class="q-step-sub">{{ t.q1_subheading }}</p>
  {% endif %}

  <div class="q-field-group">
    <span class="q-label">{{ t.q1_facility_label }} <span class="required">*</span></span>
    {% if 'facility_type' in errors %}<p class="q-error-hint">{{ t.q1_error_facility }}</p>{% endif %}
    <div class="q-pills">
      {% for val, label in [('indoor', t.q1_facility_indoor), ('outdoor', t.q1_facility_outdoor), ('both', t.q1_facility_both)] %}
      <label><input type="radio" name="facility_type" value="{{ val }}" {{ 'checked' if data.get('facility_type') == val }}><span class="q-pill">{{ label }}</span></label>
      {% endfor %}
    </div>
  </div>

  <div class="q-field-group">
    <label class="q-label" for="court_count">{{ t.q1_court_count }}</label>
    <input type="number" id="court_count" name="court_count" class="q-input" min="1" max="50" value="{{ data.get('court_count', '6') }}">
  </div>

  <div class="q-field-group">
    <span class="q-label">{{ t.q1_glass_label }}</span>
    <div class="q-pills">
      {% for val, label in [('standard', t.q1_glass_standard), ('panoramic', t.q1_glass_panoramic), ('no_preference', t.q1_glass_no_pref)] %}
      <label><input type="radio" name="glass_type" value="{{ val }}" {{ 'checked' if data.get('glass_type') == val }}><span class="q-pill">{{ label }}</span></label>
      {% endfor %}
    </div>
  </div>

  <div class="q-field-group">
    <span class="q-label">{{ t.q1_lighting_label }}</span>
    <div class="q-pills">
      {% for val, label in [('led_standard', t.q1_lighting_led_std), ('led_competition', t.q1_lighting_led_comp), ('natural', t.q1_lighting_natural), ('not_sure', t.q1_lighting_not_sure)] %}
      <label><input type="radio" name="lighting_type" value="{{ val }}" {{ 'checked' if data.get('lighting_type') == val }}><span class="q-pill">{{ label }}</span></label>
      {% endfor %}
    </div>
  </div>

  <div class="q-nav">
    <div></div>
    <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>
