{{define "main"}}
<!DOCTYPE html>
<html>
<head>
<title>German exercises</title>
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="/assets/style.css" />
<link rel="icon" sizes="64x64" href="/assets/favicon/wolfhead_negated.ico" />
<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
</head>
<body>
<div id="ancestor">
{{if .Requirement}}
<p>{{.Requirement}}</p>
{{end}}
<div class="question-text" data-testid="question">
{{.Text}}
</div>
<div id="feedback" data-testid="feedback">
{{if ne .Status 0}}
<div>
{{.Explanation}}
</div>
<button
hx-get="/next-question?current_id={{.ID}}"
hx-target="#ancestor"
hx-swap="outerHTML"
class="next-button"
data-testid="next-button">
Next Question →
</button>
{{end}}
</div>
<div id="options">
<button
data-testid="option1"
hx-post="/answer"
hx-vals='{"selected": "0", "question_id": "{{.ID}}"}'
hx-target="#feedback"
hx-swap="innerHTML"
class="option-button"
>
{{.Option1}}
</button>
<button
data-testid="option2"
hx-post="/answer"
hx-vals='{"selected": "1", "question_id": "{{.ID}}"}'
hx-target="#feedback"
hx-swap="innerHTML"
class="option-button"
>
{{.Option2}}
</button>
<button
data-testid="option3"
hx-post="/answer"
hx-vals='{"selected": "2", "question_id": "{{.ID}}"}'
hx-target="#feedback"
hx-swap="innerHTML"
class="option-button"
>
{{.Option3}}
</button>
<button
data-testid="option4"
hx-post="/answer"
hx-vals='{"selected": "3", "question_id": "{{.ID}}"}'
hx-target="#feedback"
hx-swap="innerHTML"
class="option-button"
>
{{.Option4}}
</button>
</div>
</div>
</body>
</html>
{{end}}