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

{% block title %}{% endblock %}

{% block stylesheets %}
	{{ encore_entry_link_tags('component-tab') }}
	{{ encore_entry_link_tags('activity-index') }}
	{{ encore_entry_link_tags('planning') }}
{% endblock %}

{% block javascripts %}
	{{ encore_entry_script_tags('component-tab') }}
	{{ encore_entry_script_tags('activity-index') }}
	{{ encore_entry_script_tags('planning') }}
{% 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">
		<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">
					<ul class="nav nav-tabs nav-bordered " id="planning-tabs" role="tablist">
						<li class="nav-item">
							<a href="#components_tab" data-bs-toggle="tab" aria-expanded="false" class="nav-link active fs-6 fw-lighter">
								<i class="mdi mdi-format-list-bulleted me-1"></i>
								Liste des Composantes / Activités
							</a>
						</li>
						<li class="nav-item">
							<a href="#gantt_tab" data-bs-toggle="tab" aria-expanded="false" class="nav-link fs-6 fw-lighter">
								<i class="mdi mdi-chart-gantt me-1"></i>
								Diagramme de Gantt
							</a>
						</li>
						<li class="nav-item">
							<a href="#milestones_tab" data-bs-toggle="tab" aria-expanded="false" class="nav-link fs-6 fw-lighter">
								<i class="mdi mdi-target me-1"></i>
								Jalons
							</a>
						</li>
					</ul>
					<div class="tab-content h-100">
						<div class="tab-pane active" id="components_tab">{% include 'project/planning/components_tab.html.twig' %}</div>
						<div class="tab-pane" id="gantt_tab">
							{% include 'project/planning/gantt_tab.html.twig' %}</div>
						<div class="tab-pane" id="milestones_tab">
							<h4 class="mb-4 d-flex align-items-center text-secondary fw-semibold p-2 bg-secondary-subtle rounded">
								<i class="mdi mdi-target me-2"></i>
								Définition des valeurs cibles des jalons
							</h4>
							<div id="milestones_content">
								<div id="milestones_content_placeholder" class="table bg-white table-bordered">
									<div class="placeholder-glow">
										<div class="row g-0">
											<div class="col p-2 border">
												<span class="placeholder col-6"></span>
											</div>
											<div class="col p-2 border">
												<span class="placeholder col-4"></span>
											</div>
											<div class="col p-2 border">
												<span class="placeholder col-8"></span>
											</div>
											<div class="col p-2 border">
												<span class="placeholder col-5"></span>
											</div>
										</div>
										{% for i in 1..5 %}
											<div class="row g-0">
												{% for j in 1..4 %}
													<div class="col p-2 border">
														<span class="placeholder col-{{ random(3, 9) }}"></span>
													</div>
												{% endfor %}
											</div>
										{% endfor %}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

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

	{% include 'project/planning/_modal_add_snapshot.html.twig' %}
{% endblock %}