<div class="card shadow-sm p-3 mb-4">

    <h6 class="mb-3">
        <i class="bi bi-cash-coin"></i> Tax Summary
    </h6>

    <table class="table table-sm">
        <tbody>

            <tr>
                <th>Tax Mode</th>
                <td>{{ tax.mode|upper }}</td>
            </tr>

            <tr>
                <th>Gross Income</th>
                <td>KES {{ tax.gross_income }}</td>
            </tr>

            <tr>
                <th>Allowable Expenses</th>
                <td>KES {{ tax.allowable_expenses }}</td>
            </tr>

            <tr>
                <th>Taxable Income</th>
                <td>KES {{ tax.taxable_income }}</td>
            </tr>

            <tr class="fw-bold">
                <th>Tax Payable</th>
                <td>KES {{ tax.tax_payable }}</td>
            </tr>

        </tbody>
    </table>

    <div class="alert alert-info mt-3">
        {% if tax.mode == "mri" %}
            MRI Regime: 7.5% applied on gross rent (no deductions allowed)
        {% elif tax.mode == "annual" %}
            Annual Regime: Tax applied on net income after deductions
        {% endif %}
    </div>

</div>