{% extends "global/Page.html" %}


{% block content %}

<style>
    .questionnaire-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .question {
        margin-bottom: 20px;
    }

    .question input[type="text"],
    .question select {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .questionnaire-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .questionnaire-header h2 {
        font-size: 2em;
        margin-bottom: 10px;
    }

    .questionnaire-header p {
        font-size: 1.2em;
        color: #555;
    }

    .submit-btn {
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        font-size: 1.2em;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .submit-btn:hover {
        background-color: #45a049;
    }
</style>

<div class="questionnaire-container">
    <div class="questionnaire-header">
        <h2>Questions</h2>
        <p>Please complete the questionnaire carefully.</p>
        <p>Thinking about the past 12 months, approximately how many times have you gone to:</p></div>
</div>
<table class="table">
    <thead>
    <tr>
        <th></th>
        <th>Never</th>
        <th>1–3 times</th>
        <th>4–6 times</th>
        <th>7–12 times</th>
        <th>More than 12 times</th>

        <!-- Add more headings as needed -->
    </tr>
    </thead>
    <tbody>
    {{ for field in form }}
    <tr>
        <th>{{ field.label }}</th>
        {{ for choice in field }}
        <td>{{ choice }}</td>
        {{ endfor }}
    </tr>
    {{ endfor }}
    </tbody>
</table>


<button type="submit" class="submit-btn">Next</button>
</div>

{% endblock %}