<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Finance Form</title>
</head>
<body>
    <div class="container-fluid">
    <h2>Finance Tracker</h2>
    <form action="/update" method="POST">
        <div class="row align-items-center">
            <div class="col">
                <div class="input-group">
                    <label for="D_Salary" class="col-form-label me-2 text-end float-end">D Salary</label>
                    <input type="number" step="any" class="form-control text-end float-end" id="D_Salary" name="D_Salary" value="{{ finance['D_Salary'] }}">
                </div>
            </div>
            <div class="col">
                <div class="input-group">
                    <label for="M_salary" class="col-form-label me-2  text-end float-end">M Salary</label>
                    <input type="number" step="any" class="form-control text-end float-end " id="M_salary" name="M_salary" value="{{ finance['M_salary'] }}">
                </div>
            </div>
            <div class="col">
                <div class="input-group">
                    <label for="Living_Expenses" class="col-form-label me-2  text-end float-end">Living Expenses</label>
                    <input type="number" step="any" class="form-control text-end float-end " id="Living_Expenses" name="Living_Expenses" value="{{ finance['Living_Expenses'] }}">
                </div>
            </div>
            <div class="col">
                <div class="input-group">
                    <label for="Savings" class="col-form-label me-2  text-end float-end">Savings</label>
                    <input type="number" step="any" class="form-control text-end float-end " id="Savings" name="Savings" value="{{ finance['Savings'] }}">
                </div>
            </div>
            <div class="col-4">
                <div class="input-group">
                    <label for="Overseas_trip" class="col-form-label me-2 text-end float-end">Overseas Trip</label>
                    <input type="number" step="any" class="form-control text-end float-end" id="Overseas_trip" name="Overseas_trip" value="{{ finance['Overseas_trip'] }}">
                    <input type="date" class="form-control text-end float-end" id="Overseas_trip_date" name="Overseas_trip_date" value="{{ finance['Overseas_trip_date'] }}" onchange="this.form.submit()">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="input-group">
                    <label for="D_fortnights_pay" class="col-form-label me-2 text-end float-end">D # Fortnights pay</label>
                    <input type="number" class="form-control text-end float-end " id="D_Num_fortnights_pay" name="D_Num_fortnights_pay" value="{{ finance['D_Num_fortnights_pay'] }}">
                </div>
            </div>
            <div class="col">
                <div class="input-group">
                    <label for="M_Num_fortnights_pay" class="col-form-label me-2 text-end float-end">M # Fortnights pay</label>
                    <input type="number" class="form-control text-end float-end" id="M_Num_fortnights_pay" name="M_Num_fortnights_pay" value="{{ finance['M_Num_fortnights_pay'] }}">
                </div>
            </div>
            <div class="col">
                <div class="input-group">
                    <label for="Inflation" class="col-form-label me-2 text-end float-end">Inflation (%)</label>
                    <input type="number" step="any" class="form-control text-end float-end" id="Inflation" name="Inflation" value="{{ finance['Inflation'] }}">
                </div>
            </div>
            <div class="col">
                <div class="input-group">
                    <label for="Interest_Rate" class="col-form-label me-2 text-end float-end">Interest Rate (%)</label>
                    <input type="number" step="any" class="form-control text-end float-end" id="Interest_Rate" name="Interest_Rate" value="{{ finance['Interest_Rate'] }}">
                </div>
            </div>
            <div class="col-4">
                <div class="input-group">
                    <label for="Mark_reno" class="col-form-label me-2 text-end float-end">Reno costs</label>
                    <input type="number" step="any" class="form-control text-end float-end " id="Mark_reno" name="Mark_reno" value="{{ finance['Mark_reno'] }}" >
                    <input type="date" class="form-control text-end float-end " id="Mark_reno_date" name="Mark_reno_date" value="{{ finance['Mark_reno_date'] }}" onchange="this.form.submit()">
                </div>
             </div>
        </div class="row">
        <div class="row align-items-center">
            <div class="col-2">
                <div class="input-group">
                    <label for="D_TLS_shares" class="col-form-label me-2 text-end float-end">D TLS amount</label>
                    <input type="number" step="any" class="form-control text-end float-end" id="D_TLS_shares" name="D_TLS_shares" value="{{ finance['D_TLS_shares'] }}" >
                </div>
            </div>
            <div class="col-2">
                <div class="input-group">
                    <label for="M_TLS_shares" class="col-form-label me-2 text-end float-end">M TLS amount</label>
                    <input type="number" step="any" class="form-control text-end float-end" id="M_TLS_shares" name="M_TLS_shares" value="{{ finance['M_TLS_shares'] }}" >
                </div>
            </div>
            <div class="col-2">
                <div class="input-group">
                    <label for="Car_loan_via_pay" class="col-form-label me-2 text-end float-end">Car Loan via Pay</label>
                    <input type="number" step="any" class="bg-light form-control text-end float-end" id="Car_loan_via_pay" name="Car_loan_via_pay" value="{{ finance['Car_loan_via_pay'] }}" readonly>
                </div>
            </div>
            <div class="col-2">
                <div class="input-group">
                    <label for="Car_balloon" class="col-form-label me-2 text-end float-end">Car Balloon</label>
                    <input type="number" step="any" class="bg-light form-control text-end float-end" id="Car_balloon" name="Car_balloon" value="{{ finance['Car_balloon'] }}" readonly>
                </div>
            </div>
            <div class="col-4">
                <div class="input-group">
                    <label for="M_payout" class="col-form-label me-2 text-end float-end">M VR Payout</label>
                    <input type="number" step="any" class="form-control text-end float-end" id="M_payout" name="M_payout" value="{{ finance['M_payout'] }}" >
                    <input type="date" class="form-control text-end float-end" name="M_payout_date" id="M_payout_date" value="{{finance['M_payout_date']}}" onchange="this.form.submit()">
                </div>
            </div>
        </div class="row">
        <div class="row align-items-center">
            <div class="col-2">
                <div class="input-group">
                    <label for="D_leave_owed_in_days" class="col-form-label me-2 text-end float-end">D leave owed (in days)</label>
                    <input type="number" step="any" class="form-control text-end float-end" id="D_leave_owed_in_days" name="D_leave_owed_in_days" value="{{ finance['D_leave_owed_in_days'] }}" >
                </div>
            </div>
            <div class="col-2">
                <div class="input-group">
                    <label for="D_CBA_shares" class="col-form-label me-2 text-end float-end">D CBA amount</label>
                    <input type="number" step="any" class="form-control text-end float-end" id="D_CBA_shares" name="D_CBA_shares" value="{{ finance['D_CBA_shares'] }}" >
                </div>
            </div>
            <div class="col-2">
                <div class="input-group">
                    <label for="Car_loan" class="col-form-label me-2 text-end float-end">Car Loan</label>
                    <input type="number" step="any" class="bg-light form-control text-end float-end" id="Car_loan" name="Car_loan" value="{{ finance['Car_loan'] }}" readonly>
                </div>
            </div>
            <div class="col-2">
                <div class="input-group">
                    <label for="Mich_present" class="col-form-label me-2 text-end float-end float-end">Mich Present</label>
                    <input type="number" step="any" class="form-control text-end float-end bg-light" id="Mich_present" name="Mich_present" value="{{ finance['Mich_present'] }}" readonly>
                </div>
            </div>
        </div class="row">
        <div class="row align-items-center">
            <div class="col-2">
                <div class="input-group">
                    <label for="CBA_price" class="col-form-label me-2 text-end float-end">CBA price</label>
                    <input type="number" step="any" class="form-control text-end float-end" id="CBA_price" name="CBA_price" value="{{ finance['CBA_price'] }}" >
                </div>
            </div>
            <div class="col-2">
                <div class="input-group">
                    <label for="TLS_price" class="col-form-label me-2 text-end float-end">TLS price</label>
                    <input type="number" step="any" class="form-control text-end float-end" id="TLS_price" name="TLS_price" value="{{ finance['TLS_price'] }}" >
                </div>
            </div>
            <div class="col-2">
                <div class="input-group">
                    <label for="School_Fees" class="col-form-label me-2 text-end float-end">School Fees</label>
                    <input type="number" step="any" class="bg-light form-control text-end float-end" id="School_Fees" name="School_Fees" value="{{ finance['School_Fees'] }}" readonly>
                </div>
            </div>
            <div class="col-2">
                <div class="input-group">
                    <label for="CBA_shares" class="col-form-label me-2 text-end float-end">FINAL # of CBA</label>
                    <input type="number" class="form-control text-end float-end bg-light" id="CBA_shares" value="{{CBA}}" readonly>
                </div>
            </div>
            <div class="col-2">
                <div class="input-group">
                    <label for="TLS_shares" class="offset-1 col-form-label me-2 text-end float-end">FINAL # of TLS</label>
                    <input type="number" class="form-control text-end float-end bg-light" id="TLS_shares" value="{{TLS}}" readonly>
                </div>
            </div>
        </div>

        <div class="row align-items-center mt-4">
            <div class="col-1">
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
            <div class="offset-1 col-2">
                <div class="input-group">
                  <label class="input-group-text" for="Sell_shares">Sell Shares:</label>
                  <select class="form-select" id="Sell_shares" name="Sell_shares" onchange="this.form.submit()">
                    <option value="0">Never</option>
                    <option value="1">1 years</option>
                    <option value="2">2 years</option>
                    <option value="3">3 years</option>
                    <option value="4">4 years</option>
                    <option value="5">5 years</option>
                    <option value="6">6 years</option>
                  </select>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
window.onload = function() {
    document.getElementById("Sell_shares").value = {{finance['Sell_shares']}};
};
</script>

<style>
    .col-form-label {
        width:170px;
    }
</style>

    {% if depletion_date %}
        <h3 class="mt-3" ><font color="red">Depletion Date: {{ depletion_date }} -- Details:</font></h3>
    {% else %}
        <h3 class="mt-3" ><font color="green">We DONT run out of money before super kicks in!!! -- Details:</font></h3>
    {% endif %}

    <table>
      <tr><td valign="top">
      {% set first_yr=2025 %}
      {% for date, dollars in savings %}
          {% set yr=date[:4] %}
          {% set mon=date[5:7] %}
          {% set day=date[8:10 ] %}
          {% if yr|int > first_yr|int and mon == '01' and day|int <= 14 %}
              </td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td valign="top">
          {% endif %}
          {{ date }}:&nbsp;
          {{ '$%0.2f' % dollars|float }}<br>
      {% endfor %}
      </td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td valign="top"><b>SUMMARY/BUDGET</b><br>
      {% for label, value in BUDGET %}
        {{label}} {{value}}<br>
      {% endfor %}
      </td></tr>
    </table>
</body>
</html>

