{{ block title }}Post Survey{{ endblock }}

{{ block content }}

<style> .otree-timer { display: none; } </style>

<style>
    .question-container {
        background-color: #f2f2f2; /* Grey background */
        padding: 20px; /* Padding to the sides */
        margin-bottom: 20px; /* Adjust the spacing as needed */
    }
    .submit-button {
        background-color: #4CAF50; /* Green background */
        border: none;
        color: white;
        padding: 15px 32px; /* Larger padding for bigger button */
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px; /* Larger font size */
        margin: 4px 2px;
        cursor: pointer;
    }
    .column-first-table table {
        display: table;
        width: 100%; /* Ensure the table takes full width */
    }
    .column-first-table tr {
        display: table-cell;
    }
    .column-first-table td, .column-first-table th {
        display: block;
        padding-bottom: 30px; /* Spacing between rows */
    }
    .column-first-table th {
        padding-right: 20px; /* Padding after the first column */
        white-space: nowrap; /* Prevents the text in headers from wrapping */
    }
    .column-first-table td {
        padding-right: 20px; /* Padding after the first column */
    }

</style>

<h1>Final Survey</h1>

<p>
Thank you for reaching the final section of our survey. Your responses are
very valuable to us, and we greatly appreciate the time you've taken to
complete these last few questions
</p>

<form>
    <div class="question-container">
        <strong>{{ form.country.label }}</strong><br>
        {{ form.country }}
    </div>

    <div class="question-container">
        <strong>Please select the Education Level achieved by yourself and your parents</strong><br><br>
        <table class="column-first-table">
            <tr>
                <th>Level</th>
                {{ for choice in form.education_level }}
                    <td>{{ choice.label }}</td>
                {{ endfor }}
            </tr>

            <tr>
                <th>You &nbsp&nbsp&nbsp</th>
                {{ for choice in form.education_level }}
                    <td>{{ choice }}</td>
                {{ endfor }}
            </tr>
            <tr>
                <th>Father</th>
                {{ for choice in form.fathers_education_level }}
                    <td>{{ choice }}</td>
                {{ endfor }}
            </tr>
            <tr>
                <th>Mother</th>
                {{ for choice in form.mothers_education_level }}
                    <td>{{ choice }}</td>
                {{ endfor }}
            </tr>
        </table>
        <hr>
        If you are confused what the different levels mean, here are some examples:<br>
        <ul>
    <li>Early childhood education: e.g. play school, Kindergarten</li>
            <li>Primary education: elementary school</li>
            <li>Lower secondary education: e.g. middle school</li>
            <li>Upper secondary education: e.g. High School, Gymnasium</li>
            <li>Post-secondary non-tertiary education: e.g. Career, technical or professional training programmes</li>
        </ul>
        <hr>
    </div>



    <div class="question-container">
        <strong>{{ form.occupation.label }}</strong><br>
        {{ form.occupation }}
    </div>

    <div class="question-container">
        <strong>{{ form.household_composition.label }}</strong><br>
        {{ form.household_composition }}
    </div>

    <div class="question-container">
        <strong>{{ form.number_of_books.label }}</strong><br>
        {{ form.number_of_books }}
    </div>

    <div class="question-container">
        <strong>{{ form.income.label }}</strong><br>
        {{ form.income }}
    </div>

    <button type="submit" class="submit-button">Submit Survey</button>
</form>

{{ endblock }}