{% extends "base.html" %}
{% block title %}Number Base Converter - EveryTools{% endblock %}
{% block top_title %}Number Base Converter{% endblock %}

{% block content %}
<div class="client-tool" style="max-width:500px">
    <div class="tool-header">
        <h1>Number Base Converter</h1>
        <p>Convert between decimal, binary, octal, and hexadecimal</p>
    </div>
    <div class="form-group">
        <label>Decimal (base 10)</label>
        <input type="text" id="nb-dec" placeholder="e.g. 255" oninput="fromBase('dec')">
    </div>
    <div class="form-group">
        <label>Binary (base 2)</label>
        <input type="text" id="nb-bin" placeholder="e.g. 11111111" oninput="fromBase('bin')">
    </div>
    <div class="form-group">
        <label>Octal (base 8)</label>
        <input type="text" id="nb-oct" placeholder="e.g. 377" oninput="fromBase('oct')">
    </div>
    <div class="form-group">
        <label>Hexadecimal (base 16)</label>
        <input type="text" id="nb-hex" placeholder="e.g. FF" oninput="fromBase('hex')">
    </div>
    <div id="nb-error" style="color:var(--danger);font-size:.85rem;margin-top:.5rem"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
function fromBase(source) {
    const val = document.getElementById(`nb-${source}`).value.trim();
    const err = document.getElementById("nb-error");
    err.textContent = "";
    if (!val) {
        ["dec","bin","oct","hex"].forEach(b => { if (b !== source) document.getElementById(`nb-${b}`).value = ""; });
        return;
    }

    let num;
    try {
        switch (source) {
            case "dec": num = BigInt(val); break;
            case "bin": num = BigInt("0b" + val); break;
            case "oct": num = BigInt("0o" + val); break;
            case "hex": num = BigInt("0x" + val); break;
        }
    } catch (e) {
        err.textContent = "Invalid input for this base.";
        return;
    }

    const isNeg = num < 0n;
    const abs = isNeg ? -num : num;
    const prefix = isNeg ? "-" : "";

    if (source !== "dec") document.getElementById("nb-dec").value = num.toString(10);
    if (source !== "bin") document.getElementById("nb-bin").value = prefix + abs.toString(2);
    if (source !== "oct") document.getElementById("nb-oct").value = prefix + abs.toString(8);
    if (source !== "hex") document.getElementById("nb-hex").value = prefix + abs.toString(16).toUpperCase();
}
</script>
{% endblock %}