@page "/calculadora"

<h1>Calculadora 1.0</h1>

<table>
    <tr >
        <td colspan="4"><input type="text" id="txtVisor" style="width:@widthTxtVisor" /></td>
    </tr>
    <tr>
        <td><button id="btnCE" class="btn btn-secondary" style="width:@widthBtnCalc">CE</button></td>
        <td><button id="btnC" type="reset" class="btn btn-secondary" style="width:@widthBtnCalc">C</button></td>
        <td><button id="btnLimparCasa" class="btn btn-secondary" style="width:@widthBtnCalc">@textLimparCasa</button></td>
        <td><button id="btnDividir" class="btn btn-secondary" style="width:@widthBtnCalc">/</button></td>
    </tr>
    <tr>
        <td><button id="btnSete" class="btn btn-secondary" style="width:@widthBtnCalc">7</button></td>
        <td><button id="btnOito" class="btn btn-secondary" style="width:@widthBtnCalc">8</button></td>
        <td><button id="btnNove" class="btn btn-secondary" style="width:@widthBtnCalc">9</button></td>
        <td><button id="btnMultiplicar" class="btn btn-secondary" style="width:@widthBtnCalc">X</button></td>
    </tr>
    <tr>
        <td><button id="btnQuatro" class="btn btn-secondary" style="width:@widthBtnCalc">4</button></td>
        <td><button id="btnCinco" class="btn btn-secondary" style="width:@widthBtnCalc">5</button></td>
        <td><button id="btnSeis" class="btn btn-secondary" style="width:@widthBtnCalc">6</button></td>
        <td><button id="btnSubtrair" class="btn btn-secondary" style="width:@widthBtnCalc">-</button></td>
    </tr>
    <tr>
        <td><button id="btnUm" class="btn btn-secondary" style="width:@widthBtnCalc">1</button></td>
        <td><button id="btnDois" class="btn btn-secondary" style="width:@widthBtnCalc">2</button></td>
        <td><button id="btnTres" class="btn btn-secondary" style="width:@widthBtnCalc">3</button></td>
        <td><button id="btnSomar" class="btn btn-secondary" style="width:@widthBtnCalc">+</button></td>
    </tr>
    <tr>
        <td><button id="btnNegativoPositivo" class="btn btn-secondary" style="width:@widthBtnCalc">+/-</button></td>
        <td><button id="btnZero" class="btn btn-secondary" style="width:@widthBtnCalc">0</button></td>
        <td><button id="btnVirgula" class="btn btn-secondary" style="width:@widthBtnCalc">,</button></td>
        <td><button id="btnIgual" class="btn btn-secondary" style="width:@widthBtnCalc">=</button></td>
    </tr>
</table>

@functions
{
    private string widthBtnCalc = "50px";
    private string widthTxtVisor = "100%";

    private string textLimparCasa = "<";
}