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

{% block stylesheets %}
	{{ encore_entry_link_tags('organization-index') }}
	{{ encore_entry_link_tags('department-index') }}
	{{ encore_entry_link_tags('role-index') }}
	{{ encore_entry_link_tags('role-permission-index') }}
{% endblock %}

{% block javascripts %}
	{{ encore_entry_script_tags('organization-index') }}
	{{ encore_entry_script_tags('department-index') }}
	{{ encore_entry_script_tags('role-index') }}
	{{ encore_entry_script_tags('role-permission-index') }}
{% 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_dashboard') }}" class="text-primary">
					<i class="fa fa-home me-1"></i>
					Accueil
				</a>
			</li>
			<li class="breadcrumb-item active">Organisation</li>
		</ol>
	</nav>
{% endblock %}

{% block sidebar %}
	<div class="card card-body rounded-4 p-2">
		<div class="row">
			<div class="col-12">
				<div id="list-settings" class="list-group navbar">
					<a class="list-group-item list-group-item-action" href="#organization-details">Compte Organisation</a>
					<a class="list-group-item list-group-item-action" href="#departments">Départements</a>
					<a class="list-group-item list-group-item-action" href="#roles">Rôles</a>
					<a class="list-group-item list-group-item-action" href="#permissions">Permissions</a>
					<a class="list-group-item list-group-item-action" href="#users">Utilisateurs</a>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block content %}
	<div data-bs-spy="scroll" data-bs-target="#list-settings" data-bs-offset="0" class="scrollspy-examples" tabindex="0">
		<div id="organization-details">
			{% include 'organization/_add_form.html.twig' %}
		</div>

		<div id="departments">
			{% include 'organization/_departments.html.twig' %}
			{% include 'department/_modal_add_form.html.twig' %}
			{% include 'permission/_assign_form.html.twig' %}
		</div>

		<div id="roles">
			{% include 'organization/_roles.html.twig' %}
			{% include 'role/_modal_add_form.html.twig' %}
		</div>

		<div id="permissions">
			{% include 'organization/_permissions.html.twig' %}
		</div>

		<div id="users" style="height: 300px;">
			{% include 'organization/_users.html.twig' %}
		</div>
	</div>
{% endblock %}