{% block layout_header %}
    {% import "generic.nav.macro.lib.twig" as navigation %}

    <header class="c-header c-header-light c-header-fixed c-header-with-subheader">
        <button class="c-header-toggler c-class-toggler d-lg-none mfe-auto" type="button" data-target="#sidebar" data-class="c-sidebar-show">
            <i class="c-icon c-icon-lg cil-menu"></i>
        </button>
        <a class="c-header-brand d-lg-none c-header-brand-sm-up-center" href="#">
            {% if(b_core_ui_pro is defined and b_core_ui_pro != false) %}
                <img class="c-header-brand-minimized c-d-dark-none" src="assets/img/logo.png" width="29" height="29" alt="Phorm RF Logo">
            {% endif %}
            <img class="c-header-brand-minimized c-d-default-none" src="assets/img/logo.png" width="29" height="29" alt="Phorm RF Logo">
        </a>
        {% if(navigation_routes is defined and navigation_routes.sidebar is defined) %}
            <button class="c-header-toggler c-class-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true">
                <i class="c-icon c-icon-lg cil-menu"></i>
            </button>
        {% endif %}

        <!-- Top Left Menu -->
        {{ navigation.top_left(navigation_routes) }}
        <!-- /Top Left Menu -->

        {% if(b_core_ui_pro is defined and b_core_ui_pro != false) %}
            <ul class="c-header-nav mfs-auto">
                <li class="c-header-nav-item px-3">
                    <button class="c-class-toggler c-header-nav-btn" type="button" id="header-tooltip" data-target="body" data-class="c-dark-theme" data-toggle="c-tooltip" data-placement="bottom" title="Toggle Light/Dark Mode">
                        <i class="c-icon c-d-dark-none cil-moon"></i>
                        <i class="c-icon c-d-default-none cil-sun"></i>
                    </button>
                </li>
            </ul>
        {% endif %}

        <ul class="px-3 c-header-nav">
            {% block layout_header_notifications %}
                {# block layout_header_notifications #}
                {% include "layout.react.header.notifications.tpl.twig" %}
            {% endblock layout_header_notifications %}

            {% block layout_header_tasks %}
                {# block layout_header_tasks #}
                {% include "layout.react.header.tasks.tpl.twig" %}
            {% endblock layout_header_tasks %}

            {% block layout_header_messages %}
                {# block layout_header_messages #}
                {% include "layout.react.header.messages.tpl.twig" %}
            {% endblock layout_header_messages %}

            <!-- Top Right User Menu -->
            {{ navigation.top_right(navigation_routes) }}
            <!-- Top Right User Menu -->

            <!-- If an aSide was declared using React -->
            <li id="aside_li" class="c-header-nav-item px-3" style="display: none;">
                <button class="c-class-toggler c-header-nav-btn" type="button" data-target="#aside" data-class="c-sidebar-show">
                    <i class="c-icon c-icon-lg mfe-md-2 cil-applications-settings"></i>
                </button>
            </li>
            <!-- If an aSide was declared using React -->

            <!-- Placeholder if no aSide has been declared -->
            <li id="aside_li_placeholder" class="c-header-nav-item px-3" style="display: none;">
                <span class="c-class-toggler c-header-nav-btn">
                    <i class="c-icon c-icon-lg mfe-md-2"> </i>
                </span>
            </li>
            <!-- Placeholder if no aSide has been declared -->

            <!-- aSide loading process -->
            <li id="aside_li_loading" class="c-header-nav-item px-3" style="display: block;">
                <span class="c-class-toggler c-header-nav-btn">
                    <span class="spinner-grow c-icon c-icon-lg mfe-md-2" role="status">
                        <span class="sr-only">Loading...</span>
                    </span>
                </span>
            </li>
            <!-- aSide loading process -->
        </ul>

        <div class="c-subheader justify-content-between px-3">

            {% block layout_breadcrumb %}
                {# block layout_breadcrumb #}
                {% include "layout.default.breadcrumb.tpl.twig" %}
            {% endblock layout_breadcrumb %}

            <!-- Crumb Bar Menu -->
            {{ navigation.crump_bar(navigation_routes) }}
            <!-- /Crumb Bar Menu -->

        </div>

    </header>

{% endblock layout_header %}
