{{define "content"}}
<div class="mb-6">
  <h1 class="text-2xl font-bold text-gray-800 mb-1">New Test</h1>
  {{if .Error}}
  <div class="mt-3 text-sm text-red-700 bg-red-50 border border-red-200 px-4 py-3 rounded-md">
    {{.Error}}
  </div>
  {{end}}
</div>

{{if eq .TotalQ 0}}
<div class="text-center py-12 text-gray-400">
  <p class="text-lg">No questions in the library yet.</p>
  <a href="/upload" class="mt-4 inline-block text-blue-600 hover:underline text-sm">Upload a document first</a>
</div>
{{else}}
<form method="post" action="/test/new" class="space-y-6 max-w-sm">
  <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">

  <div>
    <label for="n-input" class="block text-sm font-medium text-gray-700 mb-1">
      Number of questions
    </label>
    <div class="flex items-center gap-3">
      <input type="number" id="n-input" name="n" value="10"
             min="1" max="{{.TotalQ}}"
             class="w-24 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">
      <span class="text-sm text-gray-500" id="q-avail">
        {{.TotalQ}} available
      </span>
    </div>
  </div>

  {{if .SourceStats}}
  <div>
    <label for="source-sel" class="block text-sm font-medium text-gray-700 mb-1">Source filter</label>
    <select id="source-sel" name="source"
            class="w-full 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 bg-white"
            onchange="(function(sel){
              var opt=sel.options[sel.selectedIndex];
              var c=parseInt(opt.dataset.count,10);
              document.getElementById('q-avail').textContent=c+' available';
              var ni=document.getElementById('n-input');
              ni.max=c;
              if(parseInt(ni.value,10)>c)ni.value=c;
            })(this)">
      <option value="" data-count="{{.TotalQ}}">All sources</option>
      {{range .SourceStats}}
      <option value="{{.Source}}" data-count="{{.Count}}">{{.Source}} ({{.Count}})</option>
      {{end}}
    </select>
  </div>
  {{end}}

  <div>
    <p class="block text-sm font-medium text-gray-700 mb-2">Sampling mode</p>
    <div class="space-y-3">
      <label class="flex items-start gap-3 cursor-pointer">
        <input type="radio" name="mode" value="weighted" checked
               class="mt-0.5 text-blue-600 focus:ring-blue-500 flex-shrink-0">
        <div>
          <p class="text-sm font-medium text-gray-800">Focus on weak spots</p>
          <p class="text-xs text-gray-500">Questions you get wrong appear more often</p>
        </div>
      </label>
      <label class="flex items-start gap-3 cursor-pointer">
        <input type="radio" name="mode" value="uniform"
               class="mt-0.5 text-blue-600 focus:ring-blue-500 flex-shrink-0">
        <div>
          <p class="text-sm font-medium text-gray-800">Mix evenly</p>
          <p class="text-xs text-gray-500">All questions have equal probability</p>
        </div>
      </label>
    </div>
  </div>

  <button type="submit"
          class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2.5 px-4 rounded-md
                 text-sm font-semibold shadow-sm">
    Start test
  </button>
</form>
{{end}}
{{end}}