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

{% block title %}{% endblock %}
{% block stylesheets %}{% endblock %}
{% block javascripts %}{% endblock %}

{% block main %}

    {% if containerType is not defined %} {% set containerType = 'container-fluid' %} {% endif %}
    {% if hasSidebar is not defined %} {% set hasSidebar = true %} {% endif %}
    {% if showSidebar is not defined %} {% set showSidebar = true %} {% endif %}

    <div class="content-page"
        {% if project is defined %}
            id="project-data"
            data-app-project-id="{{ project.id }}"
            data-app-project-acronym="{{ project.acronym }}"
            data-app-project-department-id="{{ project.department.id }}"
        {% endif %}
    >
        <div class="content">
            <div class="{{ containerType }}">
                <div class="row">
                    <div class="col-12">
                        <div class="navbar-layout bg-soft-light {{ containerType }}">
                            <div class="page-title-box d-flex {{ hasSidebar ? 'justify-content-between' : 'justify-content-end' }} align-items-center">

                                {% if hasSidebar %}
                                    <button 
                                        class="btn btn-primary rounded-pill ms-2 {{ showSidebar ? '' : 'collapsed' }}" 
                                        type="button" 
                                        data-bs-toggle="collapse" 
                                        data-bs-target="#collapseSidebarMenu" 
                                        aria-expanded="{{ showSidebar ? 'true' : 'false' }}" 
                                        aria-controls="collapseSidebarMenu">
                                        <i class="fe-sidebar"></i>
                                    </button>
                                {% endif %}

                                <div class="page-title-right">
                                    {% block breadcrumb %}{% endblock %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    {% if hasSidebar %}
                        <div class="mt-2 w-20" id="sidebarCol">
                            <div class="collapse-horizontal sidebar-menu collapse pe-3 {{ showSidebar ? 'show' : 'hide' }}" id="collapseSidebarMenu">
                                <div data-simplebar style="height: 700px;">
                                    {% block sidebar %}{% endblock %}
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    <div class="mt-2 {{ hasSidebar and showSidebar ? 'w-80' : ' w-100' }}" style="width: 80%" id="mainCol">
                        {% block content %}{% endblock %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}