{{define "question"}}
<div id="question">
      {{if .Requirement}}
      <p>{{.Requirement}}</p>
      {{end}}
    <div class="question-text" data-testid="question">
        {{.Text}}
    </div>
    <div id="reaction">
        {{if eq .Status 1}}
        Correct!
        {{end}}
        {{if eq .Status 2}}
        Wrong.
        {{end}}
    </div>
    <div id="feedback" data-testid="feedback">
      {{if ne .Status 0}}
      <div>
        {{.Explanation}}
      </div>
      <button 
          hx-get="/next-question?current_id={{.ID}}&mixed_id={{.MixedID}}" 
          hx-target="#question"
          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="#question"
            hx-swap="innerHTML"
            class="option-button"
        >
            {{.Option1}}
        </button>
        <button 
            data-testid="option2"
            hx-post="/answer" 
            hx-vals='{"selected": "1", "question_id": "{{.ID}}"}'
            hx-target="#question"
            hx-swap="innerHTML"
            class="option-button"
        >
            {{.Option2}}
        </button>
        <button 
            data-testid="option3"
            hx-post="/answer" 
            hx-vals='{"selected": "2", "question_id": "{{.ID}}"}'
            hx-target="#question"
            hx-swap="innerHTML"
            class="option-button"
        >
            {{.Option3}}
        </button>
        <button 
            data-testid="option4"
            hx-post="/answer" 
            hx-vals='{"selected": "3", "question_id": "{{.ID}}"}'
            hx-target="#question"
            hx-swap="innerHTML"
            class="option-button"
        >
            {{.Option4}}
        </button>
    </div>
</div>
{{end}}