{#
Twig page which allows a for a standard page, a left panel or a right panel.

Blocks:
- main_content      - main page content
- app_menu          - entire application menu with application name and primary navigation. Usually doesn't need to be redefined
- app_title         - application title
- breadcrumb        - breadcrumbs which follow the application title.
- main_app_button   - primary application navigation consisting of main buttons which will display in the header on mobile. (<div class="btn-group"><a class="btn btn-secondary">....)
- extra_app_buttons - secondary application navigation consisting of additonal buttons which will display in the dropdown on mobile. (<div class="btn-group"><a class="btn btn-secondary">....)
- secondary_menu    - this allows an additional menu to be added into the page template.
- left_panel_label  - text label given to the left panel toggle button on mobile menu.
- left_panel_pills  - for left panel pills - set of <li> tags (usually secondary navigation) e.g. (<li><a href="some link"><span class="glyphicons-message-empty glyphicons"></span> Send</a></li>)
- left_panel        - for left panel - can be any content of your choice in the slidable left panel.
- right_panel_label - text label given to the right panel toggle button on mobile menu.
- right_panel       - for right panel - can be any content of your choice in the slidable righ panel.
#}

{% set app_to_admin_component = component('app_to_admin', app_name=current_admin_panel, show_text=true) %}
{% set extra_app_buttons_block = block('extra_app_buttons') %}
{% set left_panel_block = block('left_panel') %}
{% set left_panel_pills_block = block('left_panel_pills') %}
{% set right_panel_block = block('right_panel') %}
{% set secondary_menu_block = block('secondary_menu') %}
{% set show_panel_nav = (left_panel_block is not empty) or (left_panel_pills_block is not empty) or (right_panel_block is not empty) %}
{% set show_left_panel_toggle = (left_panel_block is not empty) or (left_panel_pills_block is not empty) %}
{% set show_extra_app_buttons = (extra_app_buttons_block is not empty) or (app_to_admin_component is not empty) %}

{% block app_menu %}
	<div class="collapsable-app-menu">
		{% block breadcrumb_full %}
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb" id="main_breadcrumb">
				<li class="breadcrumb-item">{% block app_title %}Some app{% endblock %}</li>
				{% block breadcrumb %}
				{% endblock %}
			</ol>
		</nav>
		{% endblock %}
		<div class="btn-toolbar" role="toolbar" aria-label="collapsible menu tools">
			<div class="collapsable-btn-wrap ml-auto">
				{% block main_app_button %}
				{% endblock %}

				{% if show_extra_app_buttons %}
				<div class="btn-group-collapsable">
					<div class="btn-toggle">
						<span class="dot"></span>
						<span class="dot"></span>
						<span class="dot"></span>
					</div>
					<div class="collapsable-dropdown">
						{% block extra_app_buttons %}{% endblock %}
						<div class="btn-group">
							{{ app_to_admin_component|raw }}
						</div>
					</div>
				</div>
				{% endif %}
			</div>
		</div>
	</div>
{% endblock %}


{% if secondary_menu_block is not empty %}
	<div class="secondary-menu" id="secondary_menu">
		{% block secondary_menu %}{% endblock %}
	</div>
{% endif %}


{% if show_panel_nav %}
	<div class="page-menu">
		{% if show_left_panel_toggle %}
		<span id="categories-menu" class="page-nav-toggle categories-toggle">
			<span class="hamburger">
				<span class="bar"></span>
				<span class="bar"></span>
				<span class="bar"></span>
			</span>
			<span class="page-nav-title">
				{% block left_panel_label %}<loc name="common:templater:categories">[Categories]</loc>{% endblock %}
			</span>
		</span>
		{% endif %}
		{% if right_panel_block is not empty %}
		<span id="options-menu" class="float-right page-nav-toggle options-toggle">
			<span class="page-nav-title">
				{% block right_panel_label %}<loc name="common:templater:options">[Options]</loc>{% endblock %}
			</span>
			<span class="hamburger">
				<span class="bar"></span>
				<span class="bar"></span>
				<span class="bar"></span>
			</span>
		</span>
		{% endif %}
	</div>
{% endif %}

	<div class="page-container universal-panels">
		<div class="row collapsable-panel-row no-gutters">

			{% if left_panel_block is not empty %}
			<div class="collapsable-info-panel js-info-panel">
				{% block left_panel %}{% endblock %}
			</div>
			{% elseif left_panel_pills_block is not empty %}
			<div class="collapsable-info-panel js-info-panel">
				<ul class="nav flex-column">
					{% block left_panel_pills %}{% endblock %}
				</ul>
			</div>
			{% endif %}

			<div class="page-main-content">
				{% block main_content %}
				Default page body
				{% endblock %}
			</div>

			{% if right_panel_block is not empty %}
			<div class="collapsable-side-panel js-side-panel">
				{% block right_panel %}{% endblock %}
			</div>
			{% endif %}
		</div>
	</div>

	{% block code %}{% endblock %}

	{{ component ('css_loader', src="/interface_default/css/app_panel_templates.scss" )}}
	{{ component ('js_loader', base="/intranet/js", src="/intranet/js/app_panel_templates.js" )}}
