{{-- Math Input Guide — how authors write KaTeX in question/answer/hint/solution
     fields. KaTeX auto-render ignores <code> by default, so the left column shows
     the literal markup and the right column shows the live-rendered result. --}}
<x-filament-panels::page>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">

    <div class="prose max-w-none dark:prose-invert">
        <p class="text-sm text-gray-600 dark:text-gray-300">
            Math is written with <strong>KaTeX</strong>. Wrap it in delimiters so it renders for students:
        </p>

        <div class="grid gap-3 sm:grid-cols-2 not-prose">
            <div class="rounded-xl border border-gray-200 p-4 dark:border-gray-700">
                <div class="text-xs font-semibold uppercase tracking-wide text-primary-600">Inline math — use this by default</div>
                <p class="mt-1 text-sm">Wrap with <code>$…$</code> (or <code>\(…\)</code>). Flows inside a sentence and keeps fractions a sensible size.</p>
                <p class="mt-2 text-sm">Type <code>What is $\dfrac{3}{4}$ of 20?</code> →
                    <span class="ms-1">What is $\dfrac{3}{4}$ of 20?</span></p>
            </div>
            <div class="rounded-xl border border-gray-200 p-4 dark:border-gray-700">
                <div class="text-xs font-semibold uppercase tracking-wide text-primary-600">Display math — standalone only</div>
                <p class="mt-1 text-sm">Wrap with <code>$$…$$</code> (or <code>\[…\]</code>). Centres on its own line, larger. Use only for a standalone equation.</p>
                <p class="mt-2 text-sm">Type <code>$$\dfrac{3}{4} \times 20 = 15$$</code> →</p>
                <p class="text-center">$$\dfrac{3}{4} \times 20 = 15$$</p>
            </div>
        </div>

        <div class="mt-3 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 not-prose dark:border-amber-900/40 dark:bg-amber-900/10 dark:text-amber-200">
            <strong>Tip:</strong> default to inline <code>$…$</code>. Don't use <code>$$…$$</code> inside a sentence — it forces a big, centred break.
            To show a literal dollar sign (money), escape it: <code>\$5</code> → <span>\$5</span>.
        </div>

        <h3 class="mt-6 text-base font-semibold">Common building blocks</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300">Left = what you type (inside <code>$…$</code>); right = what students see.</p>

        <div class="overflow-hidden rounded-xl border border-gray-200 not-prose dark:border-gray-700">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 dark:bg-gray-800">
                    <tr>
                        <th class="px-3 py-2 text-left font-medium text-gray-500">Purpose</th>
                        <th class="px-3 py-2 text-left font-medium text-gray-500">You type</th>
                        <th class="px-3 py-2 text-left font-medium text-gray-500">Result</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                    @php
                        $rows = [
                            ['Fraction (inline)',      '\dfrac{3}{4}',          '$\dfrac{3}{4}$'],
                            ['Fraction (small)',       '\tfrac{3}{4}',          '$\tfrac{3}{4}$'],
                            ['Mixed number',           '2\tfrac{1}{2}',         '$2\tfrac{1}{2}$'],
                            ['Power / exponent',       'x^2,\; 2^{10}',         '$x^2,\; 2^{10}$'],
                            ['Subscript',              'x_1,\; a_{n}',          '$x_1,\; a_{n}$'],
                            ['Square root',            '\sqrt{16}',             '$\sqrt{16}$'],
                            ['Other roots',            '\sqrt[3]{27}',          '$\sqrt[3]{27}$'],
                            ['Multiply',               '3 \times 4,\; 3 \cdot 4', '$3 \times 4,\; 3 \cdot 4$'],
                            ['Divide',                 '12 \div 4',             '$12 \div 4$'],
                            ['Plus / minus',           '\pm,\; \mp',            '$\pm,\; \mp$'],
                            ['Percent',                '50\%',                  '$50\%$'],
                            ['Degrees',                '90^\circ',              '$90^\circ$'],
                            ['Compare',                '\le,\; \ge,\; \ne',     '$\le,\; \ge,\; \ne$'],
                            ['Approx / proportion',    '\approx,\; \propto',    '$\approx,\; \propto$'],
                            ['Pi & area',              '\pi r^2',               '$\pi r^2$'],
                            ['Brackets that grow',     '\left(\dfrac{a}{b}\right)', '$\left(\dfrac{a}{b}\right)$'],
                            ['Decimal / ratio',        '3 : 4,\; 0.75',         '$3 : 4,\; 0.75$'],
                            ['Degrees Celsius',        '25^\circ\text{C}',      '$25^\circ\text{C}$'],
                            ['Units with text',        '5\ \text{cm}^2',        '$5\ \text{cm}^2$'],
                            ['Angle / triangle',       '\angle ABC,\; \triangle', '$\angle ABC,\; \triangle$'],
                        ];
                    @endphp
                    @foreach ($rows as [$purpose, $code, $rendered])
                        <tr>
                            <td class="px-3 py-2 text-gray-600 dark:text-gray-300">{{ $purpose }}</td>
                            <td class="px-3 py-2"><code class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800">{{ $code }}</code></td>
                            <td class="px-3 py-2">{!! $rendered !!}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <h3 class="mt-6 text-base font-semibold">Worked example</h3>
        <div class="rounded-xl border border-gray-200 p-4 text-sm not-prose dark:border-gray-700">
            <div class="text-gray-500">You type:</div>
            <code class="block whitespace-pre-wrap rounded bg-gray-100 p-2 dark:bg-gray-800">A recipe needs $\dfrac{2}{3}$ cup of sugar. For $4\tfrac{1}{2}$ batches, how much sugar is needed? Give the answer as $\square$ cups.</code>
            <div class="mt-3 text-gray-500">Students see:</div>
            <p class="mt-1">A recipe needs $\dfrac{2}{3}$ cup of sugar. For $4\tfrac{1}{2}$ batches, how much sugar is needed? Give the answer as $\square$ cups.</p>
        </div>

        <p class="mt-4 text-xs text-gray-500 not-prose">
            Reminder: FIB answers are numeric/decimal only — fraction or mixed-number answers should be MCQ. Keep the question text verbatim from the source; explanatory wording goes in hints/solutions.
        </p>
    </div>

    {{-- KaTeX auto-render. <code>/<pre> are in the default ignore list, so the
         "you type" cells stay literal while the result cells render. --}}
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
        onload="renderMathInElement(document.body, {
            delimiters: [
                {left: '$$', right: '$$', display: true},
                {left: '\\[', right: '\\]', display: true},
                {left: '$', right: '$', display: false},
                {left: '\\(', right: '\\)', display: false}
            ],
            ignoredTags: ['script','noscript','style','textarea','pre','code'],
            throwOnError: false
        });"></script>
</x-filament-panels::page>