{% extends 'layout/content.html.twig' %}

{% block title %}{% endblock %}

{% block stylesheets %}
	{{ encore_entry_link_tags('budget-tracking') }}
{% endblock %}

{% block javascripts %}
	{{ encore_entry_script_tags('budget-tracking') }}
{% endblock %}

{% block breadcrumb %}
	{{ render(controller('App\\Controller\\SharedController::getBreadcrumb', {type: 'project', id: project.id })) }}
{% endblock %}

{% block sidebar %}
	{{ render(controller('App\\Controller\\SharedController::getProjectSideBarMenu', {acronym: project.acronym, step: step, show : 'show'})) }}
{% endblock %}

{% block content %}
	<div class="row" id="project-budget" data-app-project-id="{{ project.id }}">
		<div class="col-12">
			<div class="card rounded-4 shadow-sm">
				{% include 'project/partials/_project_card_header.html.twig' %}
				<div class="card-body rounded-4">
					{% if project.budgetLines is empty %}
						<tr>
							<td colspan="100%" class="text-center text-muted py-4">
								<i class="mdi mdi-alert-circle-outline fs-4"></i><br>
								Aucune ligne budgétaire définie pour cet objet.
							</td>
						</tr>
					{% else %}
						<!-- Bloc des totaux -->
						<div class="row mb-4">
							<div class="col-12">
								<h4 class="mb-2 d-flex align-items-center text-secondary fw-semibold p-2 bg-secondary-subtle rounded text-uppercase">
									<i class="fa fa-coins me-2"></i>
									Suvi budgétaire du projet
								</h4>
								{% include 'budget/totals_block.html.twig' with {object:project} %}
							</div>
						</div>

						<!-- Liste des lignes budgétaires -->
						<div class="d-flex justify-content-between align-items-center mb-4">
							<h3 class="h3 fw-lighter text-muted">Lignes budgétaires</h3>
							<a class="btn btn-primary rounded-pill shadow-sm waves-effect" id="addBudgetLine">
								<i class="mdi mdi-plus-circle me-2"></i>Ajouter une ligne budgétaire
							</a>
						</div>

						<div class="row row-cols-md-2 row-cols-xxl-2" id="budgetLinesContainer"></div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>

	<div class="action-bar d-flex justify-content-around align-items-center">
		{{ project_action_buttons(project) }}
	</div>

	{% include 'budget/_modals.html.twig' with {inputObjectType: 'project', inputObjectAcronym: project.acronym} %}
{% endblock %}