{% if object.totalBudget > 0  %}
    <div class="total-card p-4">
        <div class="row align-items-center">
            <!-- Graphique circulaire -->
            <div class="col-lg-4 text-center mb-4 mb-lg-0">
                <div class="chart-container mb-sm-3">
                    <div class="position-relative d-inline-block" style="width: 170px; height: 170px;"
                         id="budgetDualCharts"
                         data-allocated-budget="{{ object.totalBudget }}"
                         data-committed-budget="{{ object.getTotalCommittedBudget }}"
                         data-disbursed-budget="{{ object.totalDisbursedBudget}}">
                        <canvas id="outerDonut" width="170" height="170"></canvas>
                        <canvas id="innerDonut" width="120" height="120" class="position-absolute top-50 start-50 translate-middle"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="row">
                    <div class="col-6 mb-2">
                        <div class="fw-bolder">Total Alloué</div>
                        <div class="text-white-50 font-monospace mb-1">{{ object.totalBudget | format_currency(object.currency, {fraction_digit: 0}) }}</div>
                        <div class="small">100% du budget</div>
                    </div>
                    <div class="col-6 mb-2">
                        <div class="fw-bolder">Total Engagé</div>
                        <div class="text-white-50 font-monospace mb-1">{{ object.getTotalCommittedBudget | format_currency(object.currency, {fraction_digit: 0}) }}</div>
                        <div class="small">
                            {% if object.totalBudget > 0 %}
                                {{ (object.getTotalCommittedBudget / object.totalBudget * 100) | round(2) }}% du budget
                            {% else %}
                                N/A
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="fw-bolder">Total Décaissé</div>
                        <div class="text-white-50 font-monospace mb-1">{{ object.totalDisbursedBudget | format_currency(object.currency, {fraction_digit: 0})}}</div>
                        <div class="small">
                            {% if object.totalBudget > 0 %}
                                {{ (object.totalDisbursedBudget / object.totalBudget * 100) | round(2) }}% du budget
                            {% else %}
                                N/A
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="fw-bolder">Restant à engager</div>
                        <div class="text-white-50 font-monospace mb-1">{{ object.totalRemainingBudget | format_currency(object.currency, {fraction_digit: 0})}}</div>
                        <div class="small">
                            {% if object.totalBudget > 0 %}
                                {{ (object.totalRemainingBudget / object.totalBudget * 100) | round(2) }}% du budget
                            {% else %}
                                N/A
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-wrap mt-3">
                    <div class="legend-item">
                        <span class="legend-color" style="background-color: #ff5b5b;"></span>
                        <span class="small">Engagé</span>
                    </div>
                    <div class="legend-item">
                        <span class="legend-color" style="background-color: #10C469;"></span>
                        <span class="small">Décaissé</span>
                    </div>
                    <div class="legend-item">
                        <span class="legend-color" style="background-color: #ffbc00;"></span>
                        <span class="small">Non engagé</span>
                    </div>
                    <div class="legend-item">
                        <span class="legend-color" style="background-color: #eaeaea;"></span>
                        <span class="small">Engagé non décaissé</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% else %}
    <div class="alert alert-secondary d-flex align-items-center justify-content-center text-center mt-4 p-5 rounded-4 border-0">
        <i class="mdi mdi-cash-remove fs-2 me-3 text-secondary"></i>
        <div class="fs-5 text-secondary-emphasis">
            <a href="{{ url('app_project_add_budget_step', {acronym: project.acronym}) }}" class="btn text-primary-emphasis">
                Créer une ligne budgétaire
            </a>
        </div>
    </div>
{% endif %}