<tal:sections
     xmlns:tal="http://xml.zope.org/namespaces/tal"
     xmlns:metal="http://xml.zope.org/namespaces/metal"
     xmlns:i18n="http://xml.zope.org/namespaces/i18n"
     tal:define="portal_tabs view/portal_tabs"
     tal:condition="portal_tabs"
     i18n:domain="plone">

  <p class="hiddenStructure" i18n:translate="heading_sections">Navigation</p>
  <nav class="plone-navbar pat-navigation" id="portal-globalnav-wrapper" role="navigation"
       tal:define="
         osh_view nocall:here/on-screen-help;
         organisation_link python:context.portal_registry['ploneintranet.layout.organisation_link'] if 'ploneintranet.layout.organisation_link' in context.portal_registry else '';
       "
  >
    <div class="container">
      <div class="plone-navbar-header">
        <button type="button" class="plone-navbar-toggle" data-toggle="collapse" data-target="#portal-globalnav-collapse">
          <span class="sr-only" i18n:translate="label_toggle_navigation" i18n:domain="ploneintranet">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div class="plone-collapse plone-navbar-collapse" id="portal-globalnav-collapse">
        <a class="pat-tooltip stand-alone suite-logo inactive"
           id="mobile-menu"
           href="${here/portal_url}/@@mobile-menu#document-content"
           data-pat-switch="#app-space application-*"
           data-pat-tooltip="source: ajax; class: portal-navigation; position-list: tl"
        >Quaive</a>
        <tal:bubble replace="structure python:osh_view.link_to('hamburger')" />
        <ul class="plone-nav plone-navbar-nav"
            id="portal-globalnav"
            tal:define="selected_tab python:view.selected_portal_tab">
            <tal:replace replace="structure organisation_link"/>
            <li
                tal:define="quaive_organisation python: view.get_key('ploneintranet.layout.quaive_organisation')"
                tal:condition="quaive_organisation">
              <tal:bubble replace="structure python:osh_view.link_to('portal-suite')" />
              <a class="organisation">${quaive_organisation}</a>
            </li>
            <li
                tal:define="quaive_title python: view.get_key('ploneintranet.layout.quaive_title')"
                tal:condition="quaive_title">
              <tal:bubble replace="structure python:osh_view.link_to('portal-suite')" />
              <a class="title">${quaive_title}</a>
            </li>
            <tal:tabs tal:repeat="tab portal_tabs">
              <li id="portaltab-${tid}"
                  tal:define="
                    tid tab/id;
                    current python:selected_tab==tid;
                    disable_injection tab/disable_injection|nothing;
                    dashboard python:tid=='dashboard';
                  ">
                <tal:injection condition="not:disable_injection">
                  <tal:bubble replace="structure python:osh_view.link_to('portal-'+tid)" />
                  <tal:comment condition="nothing">
                    <!-- This is the data-pat-switch statement for the following `<a>` for multi-tasking mode.
                         Keeping it here for future reference as per request of Cornelis.

                       data-pat-switch="selector: #portal; remove: section-*; add: section-${tid}
                                          &amp;&amp;
                                      selector: #app-space; remove: state-*; add: state-paused
                                          &amp;&amp;
                                      selector: #app-space; remove: section-*; add: section-${tid}"

                    -->
                  </tal:comment>
                  <a href="${tab/url}#portal-content"
                     title="${tab/description|nothing}"
                     target="${tab/link_target|nothing}"
                     class="section-${tid} tab pat-inject pat-switch close-panel ${python:'pat-toggle' if dashboard else ''} ${python:'current' if current else ''}"
                     data-pat-switch="selector: #portal; remove: section-*; add: section-${tid}
                                        &amp;&amp;
                                    selector: #app-space; remove: section-*; add: section-${tid}"
                     data-pat-inject="${python: tab.get('inject_options', 'history: record; scroll: top')}"
                     data-pat-toggle="${python:'selector: #global-header; value: mobile-menu-on' if dashboard else ''}">
                    ${tab/name}
                  </a>
                </tal:injection>
                <tal:no_injection condition="disable_injection">
                  <a href="${tab/url}"
                     title="${tab/description|nothing}"
                     target="${tab/link_target|nothing}"
                     class="section-${tid} tab ${python:'current' if current else ''}"
                    >
                    ${tab/name}
                  </a>
                </tal:no_injection>
              </li>
            </tal:tabs>
        </ul>
      </div>
    </div>
  </nav>

</tal:sections>
