{% extends "base.html" %}

{% block content %}
  <div class="wizard-step mx-auto">
    <h2 class="mb-4">
      Step&nbsp;1 &mdash; Demographics
    </h2>
    <form method="post">
      <input type="hidden"
             name="sid"
             value="{{ sid }}" />
      <div class="mb-3">
        <label for="age"
               class="form-label">
          Age (years)
        </label>
        <input type="number"
               class="form-control"
               id="age"
               name="age"
               required />
      </div>
      <div class="mb-3">
        <label for="gender"
               class="form-label">
          Gender
        </label>
        <select class="form-select"
                id="gender"
                name="gender"
                required>
          <option value="">
            Choose…
          </option>
          <option>
            Male
          </option>
          <option>
            Female
          </option>
          <option>
            Other
          </option>
        </select>
      </div>
      <div class="mb-3 row">
        <div class="col">
          <label for="weight_kg"
                 class="form-label">
            Weight&nbsp;(kg)
          </label>
          <input type="number"
                 step="0.1"
                 class="form-control"
                 id="weight_kg"
                 name="weight_kg"
                 required />
        </div>
        <div class="col">
          <label for="height_cm"
                 class="form-label">
            Height&nbsp;(cm)
          </label>
          <input type="number"
                 step="0.1"
                 class="form-control"
                 id="height_cm"
                 name="height_cm"
                 required />
        </div>
      </div>
      <button class="btn btn-primary">
        Next
      </button>
    </form>
  </div>
{% endblock %}