@props([
    'questions' => ['choice' => [], 'fill' => [], 'answer' => []],
    'selectedTemId' => null,
    'selectedTemIdsForMulti' => [],
])

<link rel="stylesheet" href="/css/katex/katex.min.css">
<style>
    .qtr-paper-shell {
        max-width: 100%;
        overflow-x: auto;
    }
    .qtr-paper-shell .question.qtr-selectable {
        border-radius: 0.375rem;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }
    .qtr-paper-shell .question.qtr-selectable:hover {
        background-color: rgba(14, 165, 233, 0.06);
    }
    .dark .qtr-paper-shell .question.qtr-selectable:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    .qtr-paper-shell .question.qtr-is-selected {
        box-shadow: 0 0 0 2px var(--fi-color-primary-500, #0ea5e9);
        background-color: rgba(14, 165, 233, 0.08);
    }
    .dark .qtr-paper-shell .question.qtr-is-selected {
        background-color: rgba(14, 165, 233, 0.12);
    }
    @include('components.exam.paper-body-grading-styles')
</style>
<div class="qtr-paper-shell math-render">
    @include('components.exam.paper-body', [
        'questions' => $questions,
        'grading' => true,
        'interactiveTemSelect' => true,
        'selectedTemIdForSelect' => $selectedTemId,
        'interactiveTemMultiSelect' => true,
        'selectedTemIdsForMultiSelect' => $selectedTemIdsForMulti,
    ])
</div>