{{ block title }}Purchase Task #{{ list_round }}{{ endblock }}
{{ block content }}

<p>
    You are given <b>${{ market.endowment }}</b> to fulfill the given shopping list.<br>
    Please choose what to purchase from the Online Market.<br><br>
    When you are satisfied with your choices, click “Next” to continue.<br>
</p>

<style>
    .form-control-errors {
    font-size: 24px !important;
    font-weight: 700;
    color: #c62828 !important;
    margin-top: 12px;
    }
    .qty-btn{
        border:1px solid #ddd;background:#fff;border-radius:10px;width:34px;height:34px;
        font-size:18px;line-height:32px;text-align:center;cursor:pointer;user-select:none;
    }
    .qty-display{min-width:28px;text-align:center;font-weight:700;font-size:16px;}
    .ot-hidden-input{position:absolute;left:-10000px;opacity:0;height:0;overflow:hidden;}

    .deal-row{display:grid;grid-template-columns:1fr 90px 120px;align-items:center;gap:12px;}
    .deal-price{text-align:right;font-weight:600;opacity:.8;white-space:nowrap;}
    .qty-controls{display:flex;align-items:center;gap:8px;justify-content:flex-end;}

    /* ✅ unified deal styles (ALL SOLID, same as Practice) */
    .deal-card{
        border:1px solid #eee;
        border-radius:12px;
        padding:10px;
        margin-bottom:8px;
    }

    /* ===== Calculator ===== */
    .calc-wrap{
      width:100%;
      max-width:420px;
      margin-top:14px;
      border-radius:5px;
      overflow:hidden;
      background:#555;
      border:1px solid #222;
    }
    .calc-display{
      background:#D6EAF8;
      padding:10px 12px;
      text-align:right;
      border-bottom:1px solid #222;
    }
    .calc-text{
      font-size:22px;
      font-weight:800;
      color:#555;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .calc-grid{ display:grid; grid-template-columns:repeat(4, 1fr); }
    .calc-btn{
      border:none; outline:none; cursor:pointer;
      padding:12px 6px; font-size:15px; font-weight:700;
      color:#555; background:#eee;
      border-right:1px solid #222; border-bottom:1px solid #222;
    }
    .calc-btn:active{ filter:brightness(.9); }
    .calc-btn.num{ background:#eee; }
    .calc-btn.top{ background:#D4F1F9; }
    .calc-btn.op{ background:#E0FFFF; color:#111; }
    .calc-btn.eq{ background:#89CFF0; color:#111; }
    .calc-grid .calc-btn:nth-child(4n){ border-right:none; }
    .zero3{ grid-column: span 3; }
</style>

{{ formfield_errors 'endowment_left' }}
{{ formfield_errors 'total_cost' }}


<div style="display:flex; gap:24px; align-items:stretch;">

    <!-- LEFT -->
    <div style="flex:1.2; min-width:400px; display:flex;">
        <div style="
            border:2px solid #eee;
            border-radius:14px;
            padding:18px;
            width:100%;
            display:flex;
            flex-direction:column;
            height:100%;
        ">
            <h3 style="margin:0 0 12px 0;">Shopping list</h3>

            <table class="table table-sm table-bordered mb-0" style="width:100%; table-layout:fixed;">
                <colgroup>
                    <col style="width:35%;">
                    <col style="width:32%;">
                    <col style="width:33%;">
                </colgroup>
                <thead class="table-light">
                    <tr>
                        <th>Item</th>
                        <th style="text-align:center;">Required</th>
                        <th style="text-align:center;">Purchased</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>A</td><td style="text-align:center;">{{ target.A }}</td><td style="text-align:center;"><span id="purchased_A">0</span></td></tr>
                    <tr><td>B</td><td style="text-align:center;">{{ target.B }}</td><td style="text-align:center;"><span id="purchased_B">0</span></td></tr>
                    <tr><td>C</td><td style="text-align:center;">{{ target.C }}</td><td style="text-align:center;"><span id="purchased_C">0</span></td></tr>
                    <tr><td>D</td><td style="text-align:center;">{{ target.D }}</td><td style="text-align:center;"><span id="purchased_D">0</span></td></tr>
                    <tr><td>E</td><td style="text-align:center;">{{ target.E }}</td><td style="text-align:center;"><span id="purchased_E">0</span></td></tr>
                </tbody>
            </table>

            <div style="margin-top:18px; border-top:1px solid #eee; padding-top:14px;">
                <div style="display:flex; justify-content:space-between;">
                    <div style="font-size:12px; opacity:.75;">Endowment</div>
                    <div style="font-weight:800;">${{ market.endowment }}</div>
                </div>

                <div style="display:flex; justify-content:space-between; margin-top:6px;">
                    <div style="font-size:12px; opacity:.75;">Total cost</div>
                    <div style="font-weight:800;">$<span id="total_cost_display">0</span></div>
                </div>

                <div style="display:flex; justify-content:space-between; margin-top:6px;">
                    <div style="font-size:12px; opacity:.75;">Dollars left</div>
                    <div style="font-weight:800;">$<span id="endowment_left_display">{{ market.endowment }}</span></div>
                </div>

                <div style="display:flex; justify-content:space-between; margin-top:6px;">
                    <div style="font-size:12px; opacity:.75;">Met required quantities?</div>
                    <div style="font-weight:800;"><span id="requirements_status" style="color:#d32f2f;">No</span></div>
                </div>

                <div style="display:flex; justify-content:space-between; margin-top:6px;">
                    <div style="font-size:12px; opacity:.75;">Share of payment you will receive for this task</div>
                    <div style="font-weight:800;">{{ market.percent }}%</div>
                </div>

                <div style="display:flex; justify-content:space-between; margin-top:6px;">
                    <div style="font-size:12px; opacity:.75;">Your earnings if this task is selected</div>
                    <div style="font-weight:800;">$<span id="earnings_if_selected">0</span></div>
                </div>
            </div>

            <!-- ===== Calculator ===== -->
            <div class="calc-wrap" id="math_calc_left">
                <div class="calc-display">
                    <div class="calc-text" id="calc_display_left">0</div>
                </div>

                <div class="calc-grid op-right">
                    <button type="button" class="calc-btn top" data-k="AC">AC</button>
                    <button type="button" class="calc-btn top" data-k="CE">CE</button>
                    <button type="button" class="calc-btn num" data-k=".">.</button>
                    <button type="button" class="calc-btn op"  data-k="÷">÷</button>

                    <button type="button" class="calc-btn num" data-k="7">7</button>
                    <button type="button" class="calc-btn num" data-k="8">8</button>
                    <button type="button" class="calc-btn num" data-k="9">9</button>
                    <button type="button" class="calc-btn op"  data-k="×">×</button>

                    <button type="button" class="calc-btn num" data-k="4">4</button>
                    <button type="button" class="calc-btn num" data-k="5">5</button>
                    <button type="button" class="calc-btn num" data-k="6">6</button>
                    <button type="button" class="calc-btn op"  data-k="-">−</button>

                    <button type="button" class="calc-btn num" data-k="1">1</button>
                    <button type="button" class="calc-btn num" data-k="2">2</button>
                    <button type="button" class="calc-btn num" data-k="3">3</button>
                    <button type="button" class="calc-btn op"  data-k="+">+</button>

                    <button type="button" class="calc-btn num zero3" data-k="0">0</button>
                    <button type="button" class="calc-btn eq" data-k="=">=</button>
                </div>
            </div>
            <!-- ===== /Calculator ===== -->

        </div>
    </div>

    <!-- RIGHT -->
    <div style="flex:1.2; min-width:500px; display:flex;">
        <div style="
            border:2px solid #eee;
            border-radius:14px;
            padding:18px;
            width:100%;
            display:flex;
            flex-direction:column;
        ">
            <h3 style="margin:0 0 12px 0;">Online Market</h3>

            <div style="font-size:13px; opacity:.8; margin-bottom:12px;">
                Use the + / − buttons to choose quantities.
            </div>

            <div style="display:flex; justify-content:flex-end; gap:10px; margin-bottom:12px;">

            {{  if player.round_number == 2 }}
            <!-- disabled version -->
                <button type="button"
                    disabled
                    style="padding:6px 12px; border-radius:8px; border:1px solid #ccc;
                           background:#eee; color:#999; cursor:not-allowed;">
                    Reset to Previous
                </button>
            {{ else }}
            <!-- active version -->
                <button type="button" class="btn btn-primary" onclick="resetToPrevious()">
                    Reset to previous basket
                </button>
            {{ endif }}

            <button type="button" class="btn btn-primary" onclick="resetToZero()">
            Reset to Zero
            </button>

            </div>

            <div style="max-height:675px; overflow-y:auto; padding-right:6px;">

                <!-- A -->
                <div style="margin-bottom:14px;">
                    <div style="font-weight:800; margin-bottom:6px;">Item A</div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qA_single }}</div>
                            <div class="deal-price">${{ prices.qA_single }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qA_single')">−</button>
                                <span class="qty-display" id="show_qA_single">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qA_single')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qA_single }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qA_P3 }}</div>
                            <div class="deal-price">${{ prices.qA_P3 }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qA_P3')">−</button>
                                <span class="qty-display" id="show_qA_P3">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qA_P3')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qA_P3 }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qA_P4 }}</div>
                            <div class="deal-price">${{ prices.qA_P4 }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qA_P4')">−</button>
                                <span class="qty-display" id="show_qA_P4">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qA_P4')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qA_P4 }}</div>
                        </div>
                    </div>

                    <div class="deal-card" style="margin-bottom:0;">
                        <div class="deal-row">
                            <div>{{ labels.qA_P5 }}</div>
                            <div class="deal-price">${{ prices.qA_P5 }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qA_P5')">−</button>
                                <span class="qty-display" id="show_qA_P5">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qA_P5')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qA_P5 }}</div>
                        </div>
                    </div>
                </div>

                <!-- ✅ B & C grouped together (same as Practice) -->
                <div style="margin-bottom:14px;">
                    <div style="font-weight:800; margin-bottom:6px;">Item B &amp; C</div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qB_single }}</div>
                            <div class="deal-price">${{ prices.qB_single }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qB_single')">−</button>
                                <span class="qty-display" id="show_qB_single">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qB_single')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qB_single }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qC_single }}</div>
                            <div class="deal-price">${{ prices.qC_single }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qC_single')">−</button>
                                <span class="qty-display" id="show_qC_single">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qC_single')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qC_single }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qB_ALPHA }}</div>
                            <div class="deal-price">${{ prices.qB_ALPHA }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qB_ALPHA')">−</button>
                                <span class="qty-display" id="show_qB_ALPHA">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qB_ALPHA')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qB_ALPHA }}</div>
                        </div>
                    </div>

                    <div class="deal-card" style="margin-bottom:0;">
                        <div class="deal-row">
                            <div>{{ labels.qB_BETA }}</div>
                            <div class="deal-price">${{ prices.qB_BETA }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qB_BETA')">−</button>
                                <span class="qty-display" id="show_qB_BETA">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qB_BETA')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qB_BETA }}</div>
                        </div>
                    </div>
                </div>

                <!-- ✅ D & E grouped together (same as Practice) -->
                <div style="margin-bottom:0;">
                    <div style="font-weight:800; margin-bottom:6px;">Item D &amp; E</div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qD_single }}</div>
                            <div class="deal-price">${{ prices.qD_single }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qD_single')">−</button>
                                <span class="qty-display" id="show_qD_single">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qD_single')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qD_single }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qD_P3 }}</div>
                            <div class="deal-price">${{ prices.qD_P3 }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qD_P3')">−</button>
                                <span class="qty-display" id="show_qD_P3">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qD_P3')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qD_P3 }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qD_P5 }}</div>
                            <div class="deal-price">${{ prices.qD_P5 }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qD_P5')">−</button>
                                <span class="qty-display" id="show_qD_P5">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qD_P5')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qD_P5 }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qE_single }}</div>
                            <div class="deal-price">${{ prices.qE_single }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qE_single')">−</button>
                                <span class="qty-display" id="show_qE_single">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qE_single')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qE_single }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qE_P4 }}</div>
                            <div class="deal-price">${{ prices.qE_P4 }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qE_P4')">−</button>
                                <span class="qty-display" id="show_qE_P4">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qE_P4')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qE_P4 }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qD_GAMMA }}</div>
                            <div class="deal-price">${{ prices.qD_GAMMA }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qD_GAMMA')">−</button>
                                <span class="qty-display" id="show_qD_GAMMA">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qD_GAMMA')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qD_GAMMA }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div>{{ labels.qD_DELTA }}</div>
                            <div class="deal-price">${{ prices.qD_DELTA }}</div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qD_DELTA')">−</button>
                                <span class="qty-display" id="show_qD_DELTA">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qD_DELTA')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qD_DELTA }}</div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

</div>

<div style="margin-top:12px;">
    {{ next_button }}
</div>

<!-- Hidden fields that must be SUBMITTED -->
<div class="ot-hidden-input">{{ form.total_cost }}</div>
<div class="ot-hidden-input">{{ form.endowment_left }}</div>


<script>
// ================= CONFIG =================
const prevValues = {{ prev_values|json }};
const ENDOWMENT = {{ market.endowment }};
const PRICES = {{ PRICES_JSON|safe }};
const GIVES  = {{ GIVES_JSON|safe }};
const FIELD_NAMES = Object.keys(PRICES);

// ================= HELPERS =================
const safeInt = x => {
    const n = parseInt(x, 10);
    return Number.isFinite(n) ? n : 0;
};

const getField = name => document.getElementById('id_' + name);

const setDisplay = (name, val) => {
    const el = document.getElementById('show_' + name);
    if (el) el.textContent = val;
};

const updateLeftPurchased = totals => {
    ['A','B','C','D','E'].forEach(k => {
        document.getElementById('purchased_' + k).textContent = totals[k];
    });
};

// ================= STATE =================
let CURRENT_TOTAL_COST = 0;

// ================= CORE =================
function recomputeAll(){
    let totalCost = 0;
    const totals = {A:0,B:0,C:0,D:0,E:0};

    FIELD_NAMES.forEach(name => {
        const f = getField(name);
        const q = safeInt(f && f.value);

        totalCost += q * PRICES[name];

        const gives = GIVES[name] || {};
        for (const k in gives) totals[k] += q * gives[k];
    });

    CURRENT_TOTAL_COST = totalCost;
    updateLeftPurchased(totals);

    const meets =
        totals.A >= {{ target.A }} &&
        totals.B >= {{ target.B }} &&
        totals.C >= {{ target.C }} &&
        totals.D >= {{ target.D }} &&
        totals.E >= {{ target.E }};

    const left = ENDOWMENT - totalCost;

    const pct = Number({{ market.percent }}) / 100;
    const earnings = meets ? Math.round(Math.max(0, left) * pct) : 0;

    // ===== UI =====
    const statusEl = document.getElementById('requirements_status');
    if (statusEl) {
        statusEl.textContent = meets ? 'Yes' : 'No';
        statusEl.style.color = meets ? '#2e7d32' : '#d32f2f';
    }

    document.getElementById('total_cost_display').textContent = totalCost;
    document.getElementById('endowment_left_display').textContent = left;

    const earnEl = document.getElementById('earnings_if_selected');
    if (earnEl) earnEl.textContent = earnings.toFixed(2);

    // ===== hidden fields =====
    const fCost = getField('total_cost');
    if (fCost) fCost.value = totalCost;

    const fLeft = getField('endowment_left');
    if (fLeft) fLeft.value = left;

    const fEarn = getField('earnings_if_selected');
    if (fEarn) fEarn.value = earnings;
}

// ================= ACTIONS =================
function syncDisplayFromFields() {
    FIELD_NAMES.forEach(name => {
        const f = getField(name);
        if (!f) return;

        const val = safeInt(f.value);
        setDisplay(name, val);
    });
}

function updateField(name, delta){
    const f = getField(name);
    if (!f) return;

    const val = Math.max(0, safeInt(f.value) + delta);
    f.value = val;

    setDisplay(name, val);
    recomputeAll();
    logQtyClick(name, delta > 0 ? "inc" : "dec", val);
}

const inc = name => updateField(name, +1);
const dec = name => updateField(name, -1);

// ================= RESET =================
function resetToZero(){
    FIELD_NAMES.forEach(name => {
        const f = getField(name);
        if (!f) return;

        f.value = 0;
        setDisplay(name, 0);
    });

    recomputeAll();

    liveSendSafe({
        event: "reset_zero",
        page_name: "PageA",
        total_cost: CURRENT_TOTAL_COST,
        clicked_at: new Date().toISOString()
    });
}

function resetToPrevious(){
    if (!prevValues) return;

    FIELD_NAMES.forEach(name => {
        const f = getField(name);
        if (!f) return;

        const val = prevValues[name] || 0;
        f.value = val;
        setDisplay(name, val);
    });

    recomputeAll();

    liveSendSafe({
        event: "reset_previous",
        page_name: "PageA",
        total_cost: CURRENT_TOTAL_COST,
        clicked_at: new Date().toISOString()
    });
}

// ================= LOGGING =================
function liveSendSafe(payload){
    try{
        if (typeof liveSend !== 'function') return;
        liveSend(payload);
    } catch(e){}
}

function logQtyClick(fieldName, action, newValue){
    liveSendSafe({
        event: "qty_click",
        page_name: "PageA",
        field_name: fieldName,
        action: action,
        new_value: newValue,
        total_cost: CURRENT_TOTAL_COST,
        clicked_at: new Date().toISOString()
    });
}

function syncDisplayFromFields() {
    FIELD_NAMES.forEach(name => {
        const f = getField(name);
        if (!f) return;

        const val = safeInt(f.value);
        setDisplay(name, val);
    });
}

// ================= INIT =================
document.addEventListener('DOMContentLoaded', () => {

    const frm = document.querySelector('form');
    if (frm) frm.noValidate = true;

    liveSendSafe({
    event: "page_enter",
    page_name: "PageA",
    clicked_at: new Date().toISOString()
    });

    const alreadyHasValues = FIELD_NAMES.some(name => {
        const f = getField(name);
        return f && f.value !== "" && f.value !== "0";
    });

    if (!alreadyHasValues) {
        if (prevValues && Object.keys(prevValues).length > 0) {
            resetToPrevious();
        } else {
            resetToZero();
        }
    } else {
        // 🔥 THIS IS THE KEY FIX
        syncDisplayFromFields();
    }

    recomputeAll();

    liveSendSafe({
        event: "page_ping",
        page_name: "PageA",
        total_cost: CURRENT_TOTAL_COST,
        clicked_at: new Date().toISOString()
    });
});
</script>

<script>
/* ===== Calculator logic + '=' logging ===== */
(function(){
    const display = document.getElementById('calc_display_left');
    const root = document.getElementById('math_calc_left');

    let expr = "";
    let justEvaluated = false;

    function setDisplayText(t){ display.textContent = t; }
    function pretty(e){ return (e || "0").replace(/\*/g,"×").replace(/\//g,"÷"); }
    function sanitize(e){ return (e || "").replace(/×/g,"*").replace(/÷/g,"/"); }
    function isOp(k){ return k==="+"||k==="-"||k==="×"||k==="÷"; }

    function canAppendDot(){
        const chunk = expr.split(/[\+\-×÷]/).pop() || "";
        return chunk.indexOf('.') === -1;
    }

    function logCalcEq(equationPretty, resultDisplay){
        try{
            if(typeof liveSend !== 'function') return;
            liveSend({
                event: "calc_eq",
                page_name: "PageA",
                equation: equationPretty,
                result_display: resultDisplay,
                total_cost: (typeof CURRENT_TOTAL_COST === 'number' ? CURRENT_TOTAL_COST : 0),
                clicked_at: new Date().toISOString()
            });
        }catch(e){}
    }

    function press(k){
        if(k==="AC"){
            expr=""; justEvaluated=false; setDisplayText("0"); return;
        }
        if(k==="CE"){
            if(expr.length>0){
                expr=expr.slice(0,-1);
                setDisplayText(pretty(expr));
                if(expr==="") setDisplayText("0");
            }
            justEvaluated=false; return;
        }
        if(k==="="){
            if(expr.trim()==="") return;
            if(/[\+\-×÷]$/.test(expr)) return;

            const equationPretty = pretty(expr);
            const evalStr = sanitize(expr);

            if(!/^[0-9+\-*/().\s]+$/.test(evalStr)){
                setDisplayText("Error"); expr=""; justEvaluated=true;
                logCalcEq(equationPretty, "Error");
                return;
            }
            try{
                const val = Function('"use strict"; return (' + evalStr + ')')();
                if(!Number.isFinite(val)){
                    setDisplayText("Error"); expr="";
                    logCalcEq(equationPretty, "Error");
                }else{
                    const out = (Math.abs(val - Math.round(val)) < 1e-12)
                        ? String(Math.round(val))
                        : String(Math.round(val * 100000000) / 100000000);
                    setDisplayText(out);
                    expr = out;
                    logCalcEq(equationPretty, out);
                }
            }catch(e){
                setDisplayText("Error"); expr="";
                logCalcEq(equationPretty, "Error");
            }
            justEvaluated=true; return;
        }

        if(isOp(k)){
            if(expr==="" && k!=="-") return;
            if(expr==="" && k==="-"){
                expr="-"; setDisplayText(pretty(expr)); justEvaluated=false; return;
            }
            if(/[\+\-×÷]$/.test(expr)) expr = expr.slice(0,-1) + k;
            else expr += k;

            setDisplayText(pretty(expr));
            justEvaluated=false; return;
        }

        if(justEvaluated){
            if((k>="0" && k<="9") || k===".") expr="";
            justEvaluated=false;
        }

        if(k==="."){
            if(expr==="" || /[\+\-×÷]$/.test(expr)){
                expr+="0."; setDisplayText(pretty(expr)); return;
            }
            if(!canAppendDot()) return;
            expr+="."; setDisplayText(pretty(expr)); return;
        }

        if(expr==="0") expr=k;
        else expr+=k;

        setDisplayText(pretty(expr));
    }

    root.addEventListener('click', function(e){
        const btn = e.target.closest('button[data-k]');
        if(!btn) return;
        press(btn.getAttribute('data-k'));
    });
})();
</script>

{{ endblock }}