{{-- Add / edit one exam question. Populated and submitted by exam-builder.js. --}}
<div class="modal fade" id="question-modal" tabindex="-1" aria-labelledby="question-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form class="modal-content" id="question-form" novalidate>
            <div class="modal-header py-2">
                <h5 class="modal-title h6 mb-0" id="question-modal-title">Add question</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul class="alert alert-danger py-2 ps-4 mb-3" id="question-errors" hidden></ul>

                <div class="row g-2">
                    <div class="col-md-6">
                        <label class="form-label" for="q-type">Question type <span class="text-danger">*</span></label>
                        <select class="form-select form-select-sm" id="q-type" name="question_type" required></select>
                        <div class="form-text" id="q-type-help"></div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="q-case">X-ray case <span class="text-danger">*</span></label>
                        <select class="form-select form-select-sm" id="q-case" name="xray_case_id" required></select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="q-view">X-ray view</label>
                        <select class="form-select form-select-sm" id="q-view" name="xray_view_id"></select>
                        <div class="form-text" id="q-view-help">Optional for OK / NOT OK questions.</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="q-item">Item of interest</label>
                        <select class="form-select form-select-sm" id="q-item" name="item_of_interest_id"></select>
                        <div class="form-text" id="q-item-help"></div>
                    </div>
                    <div class="col-12">
                        <div class="alert alert-warning py-2 mb-0" id="q-target-warning" hidden>
                            <i class="bi bi-exclamation-triangle me-1"></i>
                            This item does not have a target location configured for this view.
                            <a href="#" id="q-annotate-link" target="_blank" rel="noopener">Open the annotation editor</a> to mark it first.
                        </div>
                    </div>
                    <div class="col-md-6" id="q-correct-wrap">
                        <label class="form-label" for="q-correct">Expected answer <span class="text-danger">*</span></label>
                        <select class="form-select form-select-sm" id="q-correct" name="correct_answer">
                            <option value="">— Select the correct answer —</option>
                            @foreach (\App\Enums\OkNotOkAnswer::cases() as $expected)
                                <option value="{{ $expected->value }}">{{ $expected->label() }}</option>
                            @endforeach
                        </select>
                        <div class="form-text">Only used by OK / NOT OK questions. Students never receive this value.</div>
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="q-text">Question text</label>
                        <input class="form-control form-control-sm" id="q-text" name="question_text" maxlength="500">
                        <div class="form-text" id="q-text-help">Leave empty to use the default sentence.</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="q-points">Points <span class="text-danger">*</span></label>
                        <input class="form-control form-control-sm" id="q-points" name="points" type="number" min="1" max="1000" value="1" required>
                    </div>
                    <div class="col-md-8 d-flex align-items-end">
                        <div class="form-check mb-1">
                            <input class="form-check-input" type="checkbox" id="q-required" name="is_required" checked>
                            <label class="form-check-label" for="q-required">Required question (cannot be skipped even when skipping is allowed)</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-sm btn-primary" id="q-save"><i class="bi bi-check-lg"></i> Save question</button>
            </div>
        </form>
    </div>
</div>