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

{% block title %}{% endblock %}

{% block stylesheets %}
	{{ encore_entry_link_tags('project-new-step-budget') }}
{% endblock %}

{% block javascripts %}
	{{ encore_entry_script_tags('project-new-step-budget') }}
{% endblock %}

{% block breadcrumb %}
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb bg-white px-3 py-2 rounded shadow-sm rounded-pill align-items-center">
			<li class="breadcrumb-item d-flex align-items-center">
				<a href="{{ url('app_task_index') }}" class="text-primary">
					<i class="fa fa-home me-1"></i>
					Accueil
				</a>
			</li>
			<li class="breadcrumb-item">
				<a href="{{ url('app_project_list') }}">Projets</a>
			</li>
			<li class="breadcrumb-item active" aria-current="page">
				<a href="#">Créer un nouveau projet</a>
			</li>
		</ol>
	</nav>
{% endblock %}

{% set hasSidebar = false %}
{% block sidebar %}{% endblock %}

{% set containerType = 'container' %}
{% block content %}
	<div class="row" id="project-new-step-budget">
		<div class="col-12">
			<div class="card rounded-4 px-0">
				<div class="card-header rounded-top-4 p-0 ps-2">
					<ul class="nav nav-pills card-header-pills nav-justified p-0">
						<li class="nav-item">
							<a href="javascript: void(0);" class="nav-link active rounded-0" style="border-top-left-radius: var(--bs-border-radius-xl) !important;">
								<i class="fa fa-list"></i>
								<span class="d-none d-sm-inline">Détails du projet</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="javascript: void(0);" class="nav-link active rounded-0">
								<i class="fa fa-coins me-1"></i>
								<span class="d-none d-sm-inline">Budget</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="javascript: void(0);" class="nav-link rounded-0">
								<i class="mdi mdi-checkbox-marked-circle-outline me-1"></i>
								<span class="d-none d-sm-inline">Réglages</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="card-body">
					<form id="projectBudget">
						<div class="row">
							<div class="col-12">
								<h4 class="my-3">Ajouter une ligne budgétaire</h4>
								{% include 'budget/_add_budget_form_content.html.twig' with {inputObjectAcronym : project.acronym, inputObjectType : 'project'} %}
								<div class="alert alert-info my-3">
									<i class="fa fa-info-circle"></i>
									Vous pouvez ajouter les allocations (ordonnancements et autorisation d'engagements) plus tard.
								</div>
							</div>
							<div class="col-12 border-top pt-3">
								<button type="submit" id="budgetFormSubmit" class="btn width-xl rounded-pill btn-primary float-end">Enregistrer</button>
								<button id="budgetFormSubmitLoading" class="btn rounded-pill btn-primary width-xl d-none float-end" type="button" disabled>
									<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
									<span class="visually-hidden">Loading...</span>
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
{% endblock %}