{{ block styles }}
<link href="{{ static 'bret/css/custom.css' }}" rel="stylesheet"/>
{{ endblock }}

{{ block title }}
<div style="text-align: center;">
Survey - Demographic Information
</div>
{{ endblock }}

{{ block content }}
<div style="text-align: left;" class="consent">
    <p>
        {{ t.Please_Answer_Questions }}
    </p>

    <p>
    {{ t.name_label|safe }}
</p>

<input type="text"
       name="name"
       class="form-control">

<br/>

<p>
    {{ t.age_label|safe }}
</p>

<input type="number"
       name="age"
       min="13"
       max="125"
       class="form-control">

<br/>

<p>
    {{ t.gender_label|safe }}
</p>

{{ for value, label in t.gender_choices }}
<div class="form-check">
    <input class="form-check-input"
           type="radio"
           name="gender"
           value="{{ value }}">
    <label class="form-check-label" style="font-size:18px;">
        {{ label }}
    </label>
</div>
{{ endfor }}

<br/>

<p>
    {{ t.activity_school_label|safe }}
</p>

{{ for value, label in t.activity_school_choices }}
<div class="form-check">
    <input class="form-check-input"
           type="radio"
           name="Activity_School"
           value="{{ value }}">
    <label class="form-check-label" style="font-size:18px;">
        {{ label }}
    </label>
</div>
{{ endfor }}

<br/>

<p>
    {{ t.activity_main_label|safe }}
</p>

{{ for value, label in t.activity_main_choices }}
<div class="form-check">
    <input class="form-check-input"
           type="radio"
           name="Activity_Main"
           value="{{ value }}">
    <label class="form-check-label" style="font-size:18px;">
        {{ label }}
    </label>
</div>
{{ endfor }}

<br/>
</div>
    {{ next_button }}

{{ endblock }}