{{ extends "survey_pre_screen/Page.html" }}
{{ load otree }}

{{ block styles }}
<style>

    .otree-body {
        background-color: white;
    }

    .otree-btn-next {
        background-color: green;
        align: right;
        colour: green;
    }
    .otree-title {
        color: black;
    }

    h {
        font-weight: bold;
    }

table td{
    border: 0px;
}
table, th, td {
  border: 0px;
  text-align:left;
}
input[type="radio"] {
    margin-top: 0px;
    margin-left: 0px;
    vertical-align: middle;
    text-align:center;
}

</style>
{{ endblock }}

{{ block title }}
    Questions about the applications
{{ endblock }}

{{ block content }}
<div class="w3-light-grey w3-tiny">
    <div class="w3-container w3-green" style='width:33%'>33%</div>
</div>

<p>
    In the candidate's applications did you see evidence of the following. <br>
    If you wish you can briefly give details and say how this affected that candidate's score.
    </p>


    <table class="table" border="0px">
        <tr>
            <th width="50%">Did you notice any... </th>
            <th width="25%">Yes</th>
            <th width="25%">No</th>
        </tr>
    </table>

<table class="table" border="0px">

    <tr>
        <th width="50%">{{ form.workExperienceInc.label|linebreaks }}</th>
        {{ for choice in form.workExperienceInc }}
            <td>{{ choice }}</td>
        {{ endfor }}
    </tr>
    <tr >
        <th style="border-top:0px solid black" width="50%"></th>
        <td style="border-top:0px solid black" colspan="7"> <input type="text" class="form-control" id="id_workExperienceIncText" name="workExperienceIncText" value="" placeholder="Optional Comment"> </td>
    </tr>

    <tr>
        <th width="50%">{{ form.educationInc.label|linebreaks }}</th>
        {{ for choice in form.educationInc }}
            <td>{{ choice }}</td>
        {{ endfor }}
    </tr>

    <tr >
        <th style="border-top:0px solid black" width="50%"></th>
        <td style="border-top:0px solid black" colspan="7"> <input type="text" class="form-control" id="id_educationIncText" name="educationIncText" value="" placeholder="Optional Comment"> </td>
    </tr>


    <tr>
        <th width="50%">{{ form.health.label|linebreaks }}</th>
        {{ for choice in form.health }}
            <td>{{ choice }}</td>
        {{ endfor }}
    </tr>

    <tr >
        <th style="border-top:0px solid black" width="50%"></th>
        <td style="border-top:0px solid black" colspan="7"> <input type="text" class="form-control" id="id_healthText" name="healthText" value="" placeholder="Optional Comment"> </td>
    </tr>

    <tr>
        <th width="50%">{{ form.crime.label|linebreaks }}</th>
        {{ for choice in form.crime }}
            <td>{{ choice }}</td>
        {{ endfor }}
    </tr>

    <tr >
        <th style="border-top:0px solid black" width="50%"></th>
        <td style="border-top:0px solid black" colspan="7"> <input type="text" class="form-control" id="id_crimeText" name="crimeText" value="" placeholder="Optional Comment"> </td>
    </tr>

    <tr>
        <th width="50%">{{ form.discrimination.label|linebreaks }}</th>
        {{ for choice in form.discrimination }}
            <td>{{ choice }}</td>
        {{ endfor }}
    </tr>

    <tr >
        <th style="border-top:0px solid black" width="50%"></th>
        <td style="border-top:0px solid black" colspan="7"> <input type="text" class="form-control" id="id_discriminationText" name="discriminationText" value="" placeholder="Optional Comment"> </td>
    </tr>

    <tr>
        <th width="50%">{{ form.anythingElse.label|linebreaks }}</th>
        {{ for choice in form.anythingElse }}
            <td>{{ choice }}</td>
        {{ endfor }}
    </tr>

    <tr >
        <th style="border-top:0px solid black" width="50%"></th>
        <td style="border-top:0px solid black" colspan="7"> <input type="text" class="form-control" id="id_anythingElseText" name="anythingElseText" value="" placeholder="Optional Comment"> </td>
    </tr>

</table>

<div align ="right">
        {{ next_button }}
    </div>


{{ endblock }}