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

<div class="card">
    <div class=card-header><b>What is your gender?</b></div>
    <div class="card-body"> 
        <div {{ if 'gender' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'gender' 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 race?</b><br>(Select all that apply)</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>
<br>

<div class="card">
    <div class=card-header><b>In which state did you reside before college?</b></div>
    <div class="card-body"> {{ formfield 'residence' 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 }}