{#
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 %}
    <nav class="collapsable-app-menu" aria-label="${common:application:application_navigation.body}">
        {% block breadcrumb_full %}
            <div aria-label="${common:application:breadcrumb.body}">
                <ol class="breadcrumb" id="main_breadcrumb">
                    <li class="breadcrumb-item">{% block app_title %}Some app{% endblock %}</li>
                    {% block breadcrumb %}
                    {% endblock %}
                </ol>
            </div>
        {% endblock %}
        <div class="btn-toolbar" role="toolbar" aria-label="${common:application:application_toolbar.body}">
            <div class="collapsable-btn-wrap ml-auto">
                {% block main_app_button %}
                {% endblock %}

                {% if show_extra_app_buttons %}
                    <div class="btn-group-collapsable">
                        <button
                                type="button"
                                class="btn-toggle btn-link border-0 bg-transparent p-0"
                                aria-expanded="false"
                                aria-controls="collapsable-dropdown"
                                aria-label="${common:application:page_navigation.body}"
                        >
                            <span class="dot" aria-hidden="true"></span>
                            <span class="dot" aria-hidden="true"></span>
                            <span class="dot" aria-hidden="true"></span>
                        </button>
                        <div class="collapsable-dropdown" id="collapsable-dropdown">
                            {% block extra_app_buttons %}{% endblock %}
                            <div class="btn-group">
                                {{ app_to_admin_component|raw }}
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </nav>
{% 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 %}
    <nav class="page-menu" aria-label="${common:application:page_navigation.body}">
        {% if show_left_panel_toggle %}
            <button
                    type="button"
                    id="left-panel-button"
                    class="page-nav-toggle categories-toggle btn"
                    aria-expanded="false"
                    aria-controls="left-panel"
            >
			<span class="hamburger" aria-hidden="true">
				<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>
            </button>
        {% endif %}
        {% if right_panel_block is not empty %}
            <button
                    type="button"
                    id="right-panel-button"
                    class="float-right page-nav-toggle options-toggle btn"
                    aria-expanded="false"
                    aria-controls="right-panel"
            >
			<span class="page-nav-title">
				{% block right_panel_label %}<loc name="common:templater:options">[Options]</loc>{% endblock %}
			</span>
            <span class="hamburger" aria-hidden="true">
				<span class="bar"></span>
				<span class="bar"></span>
				<span class="bar"></span>
			</span>
            </button>
        {% endif %}
    </nav>
{% endif %}

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

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

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

        {% if right_panel_block is not empty %}
            <div id="options-panel" 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" )}}
