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

{% block tour_id 'program-detail' %}

{% block title %}{% endblock %}

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

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

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

{% set projectsCount    = program.projects is defined ? program.projects|length : (program.projectIds is defined ? program.projectIds|length : 0) %}
{% set budgetLinesCount = program.budgetLines is defined ? program.budgetLines|length : (program.budgetLineIds is defined ? program.budgetLineIds|length : 0) %}
{% set allocated        = program.totalBudget|default(0) %}
{% set committed        = program.getTotalCommittedBudget|default(0) %}
{% set disbursed        = program.totalDisbursedBudget|default(0) %}
{% set progress         = program.globalProgression|default(0) %}
{% set alertCount       = financing.alerts is defined ? financing.alerts|filter(a => a.level == 'danger')|length : 0 %}

{% block breadcrumb %}
	<nav class="osep-mini-crumbs" aria-label="breadcrumb">
		<a href="{{ url('app_home') }}"><i class="fa fa-home"></i> Accueil</a>
		<span class="sep"><i class="fa fa-chevron-right"></i></span>
		<a href="{{ url('app_program_index') }}">Programmes</a>
		<span class="sep"><i class="fa fa-chevron-right"></i></span>
		<span class="here">{{ program.acronym }}</span>
	</nav>
{% endblock %}

{% block content %}

	{# === HERO PROGRAMME === #}
	<header class="osep-program-hero">

		<div class="top">
			<div class="id-area">
				<div class="badges">
					<span class="acronym">{{ program.acronym }}</span>
					<span class="pill active"><i class="mdi mdi-circle-medium"></i> Actif</span>
					{% if program.currency %}
						<span class="pill"><i class="mdi mdi-cash"></i> {{ program.currency }}</span>
					{% endif %}
				</div>
				<h1>{{ program.name }}</h1>
				{% if program.description %}
					<p class="desc">{{ program.description }}</p>
				{% endif %}
			</div>

			<div class="progress-circle">
				<div class="ring" style="--p:{{ progress }}" data-pct="{{ progress|number_format(0) }}%"></div>
				<div class="lbl">Progression</div>
			</div>
		</div>

		<div class="kpi-row">
			<div class="kpi">
				<div class="l"><i class="mdi mdi-lan"></i> Projets</div>
				<div class="v">{{ projectsCount }}</div>
			</div>
			<div class="kpi">
				<div class="l"><i class="mdi mdi-file-tree-outline"></i> Lignes budgétaires</div>
				<div class="v">{{ budgetLinesCount }}</div>
			</div>
			<div class="kpi">
				<div class="l"><i class="mdi mdi-wallet"></i> Alloué</div>
				<div class="v">{{ allocated|minify_budget }}</div>
			</div>
			<div class="kpi">
				<div class="l"><i class="mdi mdi-check-circle-outline"></i> Engagé</div>
				<div class="v">{{ committed|minify_budget }}</div>
			</div>
			<div class="kpi">
				<div class="l"><i class="mdi mdi-cash-check"></i> Décaissé</div>
				<div class="v">{{ disbursed|minify_budget }}</div>
			</div>
		</div>

	</header>

	{# === ONGLETS === #}

	{# Sélecteur mobile pour basculer entre tabs sur petit écran #}
	<div class="d-md-none mb-3">
		<select class="form-select" id="programTabSelect">
			<option value="pane-kpi">Vue d'ensemble</option>
			<option value="pane-projects">Projets ({{ projectsCount }})</option>
			<option value="pane-lines">Lignes budgétaires ({{ budgetLinesCount }})</option>
			<option value="pane-financing">Budget &amp; Financement</option>
		</select>
	</div>

	<div class="osep-program-tabs-wrap">
		<ul class="nav nav-pills osep-tabs" id="programTabs" role="tablist">
			<li class="nav-item">
				<a class="nav-link active" id="tab-kpi" data-bs-toggle="tab" data-bs-target="#pane-kpi" href="#pane-kpi" role="tab">
					<i class="mdi mdi-view-dashboard-outline"></i>
					Vue d'ensemble
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" id="tab-projects" data-bs-toggle="tab" data-bs-target="#pane-projects" href="#pane-projects" role="tab">
					<i class="mdi mdi-lan"></i>
					Projets
					<span class="ms-1 badge bg-primary-subtle text-primary">{{ projectsCount }}</span>
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" id="tab-lines" data-bs-toggle="tab" data-bs-target="#pane-lines" href="#pane-lines" role="tab">
					<i class="mdi mdi-file-tree-outline"></i>
					Lignes budgétaires
					<span class="ms-1 badge bg-primary-subtle text-primary">{{ budgetLinesCount }}</span>
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" id="tab-financing" data-bs-toggle="tab" data-bs-target="#pane-financing" href="#pane-financing" role="tab">
					<i class="mdi mdi-cash-multiple"></i>
					Budget &amp; Financement
					{% if alertCount > 0 %}
						<span class="ms-1 badge bg-danger">{{ alertCount }}</span>
					{% endif %}
				</a>
			</li>
		</ul>

		<div class="tab-content" id="programTabsContent">
			<div class="tab-pane fade show active" id="pane-kpi" role="tabpanel">
				{% include 'program/_section_kpi.html.twig' with {
					allocated: allocated, committed: committed, disbursed: disbursed, progress: progress
				} %}
			</div>
			<div class="tab-pane fade" id="pane-projects" role="tabpanel">
				{% include 'program/_section_projects.html.twig' %}
			</div>
			<div class="tab-pane fade" id="pane-lines" role="tabpanel">
				{% include 'program/_section_budget_lines.html.twig' %}
			</div>
			<div class="tab-pane fade" id="pane-financing" role="tabpanel">
				{% include 'program/_section_financing.html.twig' with { financing: financing } %}
			</div>
		</div>
	</div>

{% endblock %}