{{define "content"}}
<div class="mb-6 flex items-start justify-between gap-4">
  <div>
    <h1 class="text-2xl font-bold text-gray-800">Review Import</h1>
    <p class="text-sm text-gray-500 mt-1">
      {{len .Draft.Questions}} question(s) found.
      Edit any text, choose the correct answer, then confirm.
      Check "Delete" to skip a question.
    </p>
  </div>
  <a href="/upload" class="text-sm text-gray-500 hover:underline whitespace-nowrap mt-1">← Upload another</a>
</div>

{{if eq (len .Draft.Questions) 0}}
<div class="text-center py-16 text-gray-400">
  <p class="text-lg">No questions were found in this document.</p>
  <p class="text-sm mt-2">The file may not contain multiple-choice questions, or the LLM was unable to extract them.</p>
  <a href="/upload" class="mt-6 inline-block text-blue-600 hover:underline text-sm">Try another file</a>
</div>
{{else}}
<form method="post" action="/import/{{.Draft.ID}}" class="space-y-6">
  <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">

  <div class="flex items-center gap-3">
    <label class="text-sm font-medium text-gray-700 whitespace-nowrap">Source</label>
    <input type="text" name="source" value="{{.Draft.Source}}"
           class="flex-1 border border-gray-300 rounded-md px-3 py-1.5 text-sm
                  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
  </div>

  {{range $i, $q := .Draft.Questions}}
  <div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
    <div class="bg-gray-50 border-b border-gray-200 px-4 py-2 flex items-center justify-between">
      <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">
        Question {{inc $i}}
      </span>
      <label class="flex items-center gap-2 text-sm text-red-600 cursor-pointer select-none">
        <input type="checkbox" name="delete_{{$i}}"
               class="rounded border-gray-300 text-red-500 focus:ring-red-400">
        Delete
      </label>
    </div>

    <div class="p-4 space-y-3">
      <textarea name="q_text_{{$i}}" rows="3" required
                class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm shadow-sm
                       focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
                       resize-y">{{$q.Text}}</textarea>

      <div class="space-y-2">
        {{range $j, $a := $q.Answers}}
        <div class="flex items-center gap-3">
          <input type="radio" name="correct_{{$i}}" value="{{$j}}"
                 {{if $a.IsCorrect}}checked{{end}}
                 class="text-blue-600 focus:ring-blue-500 flex-shrink-0">
          <input type="text" name="a_text_{{$i}}_{{$j}}" value="{{$a.Text}}" required
                 class="flex-1 border border-gray-300 rounded-md px-3 py-1.5 text-sm shadow-sm
                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        </div>
        {{end}}
      </div>
      <p class="text-xs text-gray-400">Select the radio button next to the correct answer.</p>
    </div>
  </div>
  {{end}}

  <div class="flex gap-3 pt-2 pb-8">
    <button type="submit"
            class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2.5 px-4 rounded-md
                   text-sm font-semibold shadow-sm">
      Confirm import
    </button>
    <a href="/upload"
       class="px-4 py-2.5 border border-gray-300 rounded-md text-sm font-medium text-gray-700
              hover:bg-gray-50 text-center">
      Cancel
    </a>
  </div>
</form>
{{end}}
{{end}}