{% macro qform(action, qrow, options, label) %}
{% set cur = qrow['qtype'] if qrow else 'mcq' %}
<form method="post" action="{{ action }}" class="qform" enctype="multipart/form-data">
  <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
  <div class="cols2">
    <div class="field">
      <label>Question type</label>
      <select name="qtype" class="qtype-select">
        <option value="mcq" {{ 'selected' if cur == 'mcq' }}>Multiple choice</option>
        <option value="tf" {{ 'selected' if cur == 'tf' }}>True / False</option>
        <option value="short" {{ 'selected' if cur == 'short' }}>Short answer (typed)</option>
      </select>
    </div>
    <div class="field">
      <label>Marks</label>
      <input type="number" name="marks" min="0.5" max="100" step="0.5" value="{{ (qrow['marks']|num) if qrow else 1 }}">
    </div>
  </div>
  <div class="field"><label>Question</label><textarea name="text" rows="3" required>{{ qrow['text'] if qrow else '' }}</textarea></div>

  <div class="field"><label>Picture <span class="hint">(optional: diagram, graph or equation; PNG/JPG/GIF/WEBP, max 2 MB)</span></label>
    {% if qrow and qrow['image'] %}<img class="qimg" src="{{ qimg(qrow['image']) }}" alt=""><label class="hint"><input type="checkbox" name="remove_image" value="1"> Remove current picture</label>{% endif %}
    <input type="file" name="image" accept="image/png,image/jpeg,image/gif,image/webp"></div>

  <div class="qtype-box" data-type="mcq">
    <label>Options <span class="hint">(fill at least two, tick the correct one)</span></label>
    {% for l in LETTERS %}
    {% set i = loop.index0 %}
    <div class="optrow">
      <b>{{ l }}</b>
      <input type="text" name="opt_{{ l|lower }}" value="{{ options[i] if options and i < options|length else '' }}" placeholder="Option {{ l }}">
      <input type="radio" name="answer_mcq" value="{{ l }}" title="Correct answer" {{ 'checked' if qrow and qrow['qtype'] == 'mcq' and qrow['answer'] == l }}>
    </div>
    {% endfor %}
  </div>

  <div class="qtype-box" data-type="tf" hidden>
    <div class="field">
      <label>Correct answer</label>
      <select name="answer_tf">
        <option value="TRUE" {{ 'selected' if qrow and qrow['answer'] == 'TRUE' }}>True</option>
        <option value="FALSE" {{ 'selected' if qrow and qrow['answer'] == 'FALSE' }}>False</option>
      </select>
    </div>
  </div>

  <div class="qtype-box" data-type="short" hidden>
    <div class="field">
      <label>Accepted answer(s)</label>
      <input type="text" name="answer_short" value="{{ qrow['answer'] if qrow and qrow['qtype'] == 'short' else '' }}" placeholder="Abuja | abuja fct">
      <div class="hint">Separate alternative spellings with |. Matching ignores capital letters and extra spaces.</div>
    </div>
  </div>
  <button class="btn primary" type="submit">{{ label }}</button>
</form>
{% endmacro %}