{{ block content }}
<b>Answer the following questions:</b>
<br>
<br>

<div class="card">
    <div class=card-header><b>What was your sex assigned at birth?</b></div>
    <div class="card-body">
        <div {{ if 'sex' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            {{ formfield 'sex' label=''}}
        </div>                        
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>What is your age?</b></div>
    <div class="card-body">{{ formfield 'age' label=''}}</div>
</div>
<br>

<div class="card">
    <div class=card-header><b>What is your ethnicity?</b><br>Select all that apply. You can leave blank if you prefer not to disclose.</div>
    <div class="card-body">
        <table>
            <tr>
                <td style="width: 30px"><input type="checkbox" name="{{ form.race1.name }}" value="1" class="form-check-input"></td>
                <td>White</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="{{ form.race2.name }}" value="1" class="form-check-input"></td>
                <td>Black or African American</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="{{ form.race3.name }}" value="1" class="form-check-input"></td>
                <td>Asian</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="{{ form.race4.name }}" value="1" class="form-check-input"></td>
                <td>American Indian or Alaska Native</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="{{ form.race5.name }}" value="1" class="form-check-input"></td>
                <td>Native Hawaiian or Other Pacific Islander</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="{{ form.race6.name }}" value="1" class="form-check-input"></td>
                <td>Other</td>
            </tr>
        </table>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>Are you of Hispanic, Latino, or Spanish origin?</b></div>
    <div class="card-body">
        <div {{ if 'hispanic' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'hispanic' label=''}}
        </div>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>In which state do you currently live?</b></div>
    <div class="card-body">{{ formfield 'state' label=''}}</div>
</div>
<br>
<br>

<button class="otree-btn-next btn btn-dark btn-primary">Next</button>

{{ endblock }}

{{ block style }}
    <link rel="stylesheet" href="{% static 'global/style.css' %}"/>
{{ endblock }}