<div style="background:var(--surface, #1a1d27); border:1px solid var(--border, #333749); border-radius:12px; padding:20px 24px; margin-bottom:24px;">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
<div style="font-weight:700; font-size:1rem; color:var(--text);">Knowledge Check</div>
<span style="font-size:0.8rem; color:var(--text-muted);">
Question {{ question_idx + 1 }} of {{ total_questions }}
</span>
</div>
<div style="padding:14px 18px; background:var(--surface-2, #252834); border-radius:8px; margin-bottom:16px; font-size:0.95rem; color:var(--text); font-style:italic;">
"{{ question }}"
</div>
{% if current_answer_html %}
<div style="margin-bottom:16px;">
<div style="font-size:0.8rem; color:var(--text-muted); text-transform:uppercase; font-weight:600; margin-bottom:8px;">
Here's what we'd tell someone:
</div>
<div style="padding:14px 18px; background:var(--bg, #0f1117); border:1px solid var(--border); border-radius:8px; font-size:0.9rem; max-height:200px; overflow-y:auto;">
{{ current_answer_html | safe }}
</div>
</div>
{% else %}
<div style="margin-bottom:16px; padding:14px 18px; background:var(--bg, #0f1117); border:1px solid var(--border); border-radius:8px; font-size:0.9rem; color:var(--text-muted); font-style:italic;">
No answer found yet — your input will be the first!
</div>
{% endif %}
<form hx-post="/admin/knowledge/quiz/submit"
hx-target="#quiz-response"
hx-swap="innerHTML">
<input type="hidden" name="question" value="{{ question }}">
<input type="hidden" name="idx" value="{{ question_idx }}">
<div style="font-size:0.85rem; color:var(--text); font-weight:600; margin-bottom:8px;">
How would you improve this answer?
</div>
<textarea name="improvement" rows="4"
placeholder="Add your expertise — corrections, tips, nuances, or a better explanation..."
style="width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:10px; font-family:inherit; font-size:0.9rem; resize:vertical;"></textarea>
<div style="display:flex; gap:8px; margin-top:10px;">
<button type="submit" class="btn" style="padding:10px 24px; width:auto; font-size:0.85rem;">
Submit
</button>
{% if question_idx + 1 < total_questions %}
<button type="button"
hx-get="/admin/knowledge/quiz?idx={{ question_idx + 1 }}"
hx-target="#quiz-card"
hx-swap="innerHTML"
style="background:none; border:1px solid var(--border); color:var(--text-muted); padding:10px 20px; border-radius:8px; font-size:0.85rem; cursor:pointer;">
Skip
</button>
{% endif %}
</div>
</form>
<div id="quiz-response" style="margin-top:12px;"></div>
</div>
