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

<div id="demographics">
    <h4>Please answer the demographic questions below. All data are strictly anonymous and confidential and will not under any circumstances be passed to a third party.</h4>
    <hr>
    <div class="legal well">
        <br>WHAT IS YOUR GENDER (select one)?
        <br><input type="radio" name="gender" value="1" required>Female
        <br><input type="radio" name="gender" value="2">Male
        <br><input type="radio" name="gender" value="3">Other
        <br><input type="radio" name="gender" value="4">Prefer Not To Say
        <p>
            <br>WHAT IS YOUR AGE?
            <br>Please enter a number or N/A if you prefer not to say:
            <input type="text" name="age" size="2" maxlength="3" value="" required>
        <p>
            <br>WHAT IS YOUR ETHNICITY (select one)?
            <br><input type="radio" name="ethnicity" value="1" required>Hispanic or Latino
            <br><input type="radio" name="ethnicity" value="2">Not Hispanic or Latino
            <br><input type="radio" name="ethnicity" value="3">Prefer not to say
        <p>
            <br>WHAT IS YOUR RACE (select one)?
            <br><input type="radio" name="race" value="1" required>Native American or Native Alaskan
            <br><input type="radio" name="race" value="2">Asian
            <br><input type="radio" name="race" value="3">Native Hawaiian or Other Pacific Islander
            <br><input type="radio" name="race" value="4">Black or African American
            <br><input type="radio" name="race" value="5">White
            <br><input type="radio" name="race" value="6">Mixed
            <br><input type="radio" name="race" value="7">Prefer not to say
    </div>
    <hr>

    {{ next_button }}
</div>

<style>
    .legal {
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 5px;
    }

    input[type="radio"] {
        margin-right: 8px;
        margin-left: 15px;
    }

    input[type="text"] {
        margin-left: 10px;
        padding: 5px;
    }

    p {
        margin: 15px 0;
    }
</style>

{{ endblock }}