{{ block title }}
Demographics
{{ endblock }}

{{ block content }}

<div class="row">
<div class="card bg-light m-3">
    <br>
    <h5>
        <strong>About you</strong>
    </h5>
</div>
</div>

<table class="table table-striped">

    <tr>
        <td>{{ form.qd1.label }}</td>
        <td>{{form.qd1}}</td>
    </tr>

    <tr>
        <td>{{ form.qd2.label }}</td>
        <td>{{form.qd2}}</td>
    </tr>

    <tr>
        <td>{{ form.qd3.label }}</td>
        <td>{{form.qd3}}</td>
    </tr>

    <tr>
        <td>What is your ethnicity? Check all that apply.</td>
        <td>  <label>
              <input type="checkbox" name={{ form.White.label }}
              </label><br>

              <label>
              <input type="checkbox" name={{ form.Hispanic.label }}
              </label><br>

              <label>
              <input type="checkbox" name={{ form.Black.label }}
              </label><br>

              <label>
              <input type="checkbox" name={{ form.Asian.label }}
              </label><br>

              <label>
              <input type="checkbox" name={{ form.AmIndian.label }}
              </label><br>

              <label>
              <input type="checkbox" name={{ form.NaHawaiian.label }}
              </label><br>

            <label>
                <input type="checkbox" name={{ form.Other.label }}
              </label><br>

        </td>

    </tr>

    <tr>
        <td>{{ form.qd4.label }}</td>
        <td>{{form.qd4}}</td>
    </tr>

    <tr>
        <td>{{ form.qd5.label }}</td>
        <td>{{form.qd5}}</td>
    </tr>
</table>


{{ next_button }}

<script>
    // workaround needed until wtforms #615 is published
    for (let option of document.querySelectorAll('input[type=radio]')) {
        option.required = 'required';
    }
</script>

{{ endblock }}