<!DOCTYPE html>
<html>
<head>
    <title>DISC Assessment</title>
    <style>
        .question {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        label {
            display: block;
            margin: 10px 0;
            padding: 8px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
        button {
            padding: 12px 24px;
            font-size: 1.1em;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center; color: #2c3e50;">DISC Personality Assessment</h1>
    <form method="POST" action="/results">
        {% for question in questions %}
        <div class="question">
            <h3>{{ question.number }}. {{ question.text }}</h3>
            {% for option in question.options %}
            <label>
                <input type="radio" name="q{{ question.number }}" 
                      value="{{ option.trait }}" required>
                {{ option.letter }}) {{ option.text }} ({{ option.trait }})
            </label>
            {% endfor %}
        </div>
        {% endfor %}
        <div style="text-align: center; margin: 30px 0;">
            <button type="submit">Get Results</button>
        </div>
    </form>
</body>
</html>