{% extends "layout.html"%}

{% block title %}
    Budget
{% endblock %}

{% block main %}
<div class="row align-items-start row-cols-2">
    <!-- Display current budget-->
    <div class="col" style="margin-top: 120px;">
        <p style="font-size: 20px; font-weight: bold;">Your budget:</p>
        <div class="container-money">
            <img id="dollar" src="/static/red_dollar.jpg" alt="dollar bill">
            <div class="centered-money">
                <span id="budget">{{ budget | usd }}</span>
            </div>
        </div><br>
        <!-- Set new budget -->
        <div>
            <form action="/budget" method="post">
                <div class="mb-3">
                    <label for="add_budget" style="margin-top: 30px; font-weight: bold;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cash-stack" viewBox="0 0 16 16">
                            <path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1H1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
                            <path d="M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2H3z"/>
                        </svg>   Set your budget
                    </label><br>

                    <span style="font-size: 20px; margin-right: 5px;">&#36;</span>
                    <input name="add_budget" autocomplete="off" autofocus class="form-control" placeholder="Add Budget..." type="number" min="1.00" step="0.01" required>
                </div>
                <button class="btn btn-success" type="submit">Update Budget</button>
            </form>
        </div>
    </div>
    <div class="col">
        <img src="/static/piggy_green.png"><br>
    </div>
</div>

<!-- Change budget background image depending on budget balance -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let budget = document.getElementById('budget').innerHTML.split('$').pop();
        if (parseFloat(budget) <= 0) {
            document.getElementById('dollar').setAttribute('src', '/static/red_dollar.jpg');
        } else {
            document.getElementById('dollar').setAttribute('src', '/static/green_dollar.jpg');
        }
    });
</script>
{% endblock %}