{% extends "layout.html"%}

{% block title %}
    Home
{% endblock %}

{% block main %}
<!-- Budget & spending statistics -->
<div class="container-md">
    <p style="font-size: 24px;">Hi there, <span id="name">{{ name }}</span> !</p>
    <h5>Your budget:</h5>
    <div class="container-money">
        <img id="dollar" src="/static/red_dollar.jpg" alt="dollar bill">
        <div class="centered-money">
            <span id="budget">{{ cash | usd }}</span>
        </div>
    </div>
</div>

<!-- Data used to implement pie chart, div itself not meant to be displayed -->
<div id="hidden_data" style="display: none;">
    <p>{{ rent }}</p>
    <p>{{ maintain }}</p>
    <p>{{ food }}</p>
    <p>{{ family }}</p>
    <p>{{ pets }}</p>
    <p>{{ clothes }}</p>
    <p>{{ hobbies }}</p>
    <p>{{ invest }}</p>
    <p>{{ other }}</p>
</div>

<div class="row align-items-start row-cols-2" style="margin-top: 100px;">
    <div class="col">
        <div class="pie-wrapper">
            <label for="piechart"><h5>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-fill" viewBox="0 0 16 16">
                <path d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z"/>
            </svg>   Your total expenses</h5></label>
            <canvas id="piechart"></canvas>
        </div>
    </div>

    <div class="col" style="margin-top: 210px;">
        <img src="/static/piggy_main.jpg" alt="Increase your savings!">
    </div>
</div>

<!-- https://www.chartjs.org/docs/latest/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js" integrity="sha512-tMabqarPtykgDtdtSqCL3uLVM0gS1ZkUAVhRFu1vSEFgvB73niFQWJuvviDyBGBH22Lcau4rHB5p2K2T0Xvr6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#installation -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<script src="/static/piechart.js"></script>
{% endblock %}