{% extends 'base.html.twig' %}

{% block stylesheets %}
    {{ encore_entry_link_tags('program-index') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('program-index') }}
{% endblock %}

{% block main %}

<div class="content-page">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div id="program-list-column" class="col-md-3 p-3 border-end">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="fw-lighter">Programmes</h4>
                        <a href="#" class="btn btn-sm waves-effect" data-bs-toggle="modal" data-bs-target="#createProgramModal">
                            <i class="mdi mdi-plus add-new-plus"></i>
                        </a>
                    </div>
                    <hr class="mb-4">
                    <div class="row mb-2 pb-5">
                        {% for program in programs %}
                            <div class="col-12 program-card
                                {% if selectedProgram and selectedProgram.id == program.id %}active{% endif %}"
                                 data-program-id="{{ program.id }}"
                                 data-program-acronym="{{ program.acronym }}"
                                 data-program-content-url="{{ path('app_program_detail_content', {id: program.id}) }}"
                                 style="cursor: pointer;"
                            >
                                <div class="d-flex justify-content-between align-items-center ">
                                    <div class="flex-grow-1">
                                        <h5 class="mb-1 fw-lighter text-muted">{{ program.name }}</h5>
                                        <small class="text-muted">
                                            {{ program.totalBudget | format_currency(program.currency) }} -
                                            {{ program.projects | length }} projets
                                        </small>
                                    </div>
                                    <div class="ms-2">
                                        <div class="progress progress-bar-alt-success" style="height: 7px; width: 75px;">
                                            <div class="progress-bar bg-success" style="width: {{ program.globalProgression }}%">
                                            </div>
                                        </div>
                                        <small class="text-muted d-block mt-1 text-end">
                                            {{ program.globalProgression | number_format(1) }}%
                                        </small>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-md-9 offset-3 ps-2 h-100" id="detail-container">
                    <div class="row">
                        <div class="col-12 mb-2">
                            <div class="page-title-box">  
                                <div class="page-title-right mt-0">
                                    {{ render(controller('App\\Controller\\SharedController::getBreadcrumb', {type: 'program', id: selectedProgram.id ?? 1})) }}
                                </div>
                            </div>
                        </div>
                        <div id="detail-content" data-program-id="{% if selectedProgram %} {{ selectedProgram.id}} {% endif %}">
                            {% if selectedProgram %}
                                {{ include('program/_detail_content.html.twig', { program: selectedProgram }) }}
                            {% endif %}
                        </div>
                        <div id="detail-content-placeholder" class="{% if selectedProgram %}d-none{% endif %}">
                            {{ include('program/_detail_content_placeholder.html.twig') }}
                        </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>

{% include 'program/_modal_add_program.html.twig' %}
{% include 'budget/_modals.html.twig' %}

{% endblock %}