{{ block content }}
<div class="card bg-mid m-0">
<h2 class="card-header">⚠️ Attention Check Required</h2>
<div class="card-body">
<div style="background-color: #fff3cd; border: 2px solid #ffeaa7; border-radius: 12px; padding: 20px; margin-bottom: 20px;">
<p style="color: #856404; font-size: 16px; line-height: 1.5; text-align: center;">
 You have gotten the previous practice question wrong twice in a row.
 To proceed with the training, you must get this attention check correct.
 <strong>You will only have one chance.</strong>
</p>
</div>

<div style="background-color: #e7f3ff; border: 2px solid #b3d9ff; border-radius: 12px; padding: 20px; margin-bottom: 30px;">
<p style="color: #0066cc; font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 20px;">
 {{ question }}
</p>

<div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;">
<button type="button" class="attention-button" onclick="setAttentionAnswer(1)">{{ option1 }}</button>
<button type="button" class="attention-button" onclick="setAttentionAnswer(2)">{{ option2 }}</button>
<button type="button" class="attention-button" onclick="setAttentionAnswer(3)">{{ option3 }}</button>
<button type="button" class="attention-button" onclick="setAttentionAnswer(4)">{{ option4 }}</button>
</div>
</div>

<input type="hidden" name="attention_check_answer" id="id_attention_check_answer" value="">
</div>
</div>

<style>
.attention-button {
    background-color: #28a745;
    border: none;
    color: white;
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s;
    min-width: 120px;
}

.attention-button:hover {
    background-color: #218838;
}

.attention-button:active {
    background-color: #1e7e34;
}

.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    padding: 15px 20px;
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    border-radius: 8px 8px 0 0;
}

.card-body {
    padding: 25px;
}

.bg-mid {
    background-color: #ffffff;
}

.m-0 {
    margin: 0;
}
</style>

<script>
function setAttentionAnswer(answer) {
    document.getElementById('id_attention_check_answer').value = answer;
    document.querySelector('form').submit();
}
</script>
{{ endblock }}