<nav id="first-nav" class="first-nav navbar navbar-expand-lg navbar-dark nav-pills fixed-top"
  aria-label="Main navigation bar">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler"
    aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="/home">
    <img class="logo-navbar" alt="CTAO" src="/static/images/CTAO.svg" />&nbsp
    QualPipe
  </a>

  <div class="collapse navbar-collapse" id="navbarToggler">
    <ul class="navbar-nav mr-auto mt-0 mt-lg-0">
      <li class="nav-separator mx-2 my-1"></li>

      <li class="nav-item px-1 {% if array_element=='home' %} active {% endif %}" id="home-nav">
        <a class="nav-link" href="/home">Home</a>
      </li>

      <li class="nav-separator mx-2 my-1"></li>

      <li class="nav-item px-1 {% if array_element=='LSTs' %} active {% endif %}" id="LSTs-nav">
        <a class="nav-link" href="/LSTs">LSTs</a>
      </li>

      <li class="nav-separator mx-2 my-1"></li>

      <li class="nav-item px-1 {% if array_element=='MSTs' %} active {% endif %}" id="MSTs-nav">
        <a class="nav-link" href="/MSTs">MSTs</a>
      </li>

      <li class="nav-separator mx-2 my-1"></li>

      <li class="nav-item px-1 {% if array_element=='SSTs' %} active {% endif %}" id="SSTs-nav">
        <a class="nav-link" href="/SSTs">SSTs</a>
      </li>

      <li class="nav-separator mx-2 my-1"></li>

      <li class="nav-item px-1 {% if array_element=='Auxiliary' %} active {% endif %}" id="Auxiliary-nav">
        <a class="nav-link" href="/Auxiliary">Auxiliary</a>
      </li>

      <li class="nav-separator mx-2 my-1"></li>

      <li class="nav-item px-1 {% if array_element=='wrong_page_example' %} active {% endif %}"
        id="wrong-page-example-nav">
        <a class="nav-link" href="/wrong_page_example">Wrong_Page_Example</a>
      </li>

      <li class="nav-separator mx-2 my-1"></li>
    </ul>
  </div>
</nav>

{# Nabvbar for Telescopes (LSTs, MSTs, SSTs) #}
{% if array_element=='LSTs' or array_element=='MSTs' or array_element=='SSTs' %}
<nav id="second-nav" class="second-nav navbar navbar-expand-lg navbar-dark nav-pills fixed-top" style="z-index:1029"
  aria-label="Main navigation bar">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler2"
    aria-controls="navbarToggler2" aria-expanded="false" aria-label="Toggle navigation2">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarToggler2">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      {% set lsts_subitems = [
      {'name': 'event_rates', 'label': 'Event rates'}, {'name': 'trigger_tags',
      'label': 'Trigger tags'}, {'name': 'pointings', 'label': 'Pointings'},
      {'name': 'interleaved_pedestals', 'label':
      'Interleaved pedestals'}, {'name': 'interleaved_flat_field_charge',
      'label': 'Interleaved flat field charge'}, {'name':
      'interleaved_flat_field_time', 'label': 'Interleaved flat field time'},
      {'name': 'cosmics', 'label': 'Cosmics'}, {'name': 'pixel_problems',
      'label': 'Pixel problems'}, {'name': 'muons', 'label': 'Muons'}, {'name':
      'interleaved_pedestals_averages', 'label': 'Interleaved pedestals
      averages'}, {'name': 'interleaved_FF_averages', 'label': 'Interleaved FF
      averages'}, {'name': 'cosmics_averages', 'label': 'Cosmics averages'}, ]
      %}

      {% for item in lsts_subitems %}
      <li class="nav-subitem px-1 d-flex align-items-center{% if active_subitem==item.name %} active{% endif %}"
        id="{{ item.name | replace('_', '-') }}-nav">
        <a class="nav-link text-center" href="/{{ array_element }}/{{ item.name }}"
          style="white-space: normal; line-height: 1.2">{{ item.label }}</a>
      </li>

      {% if not loop.last %}
      <li class="nav-separator mx-2 my-1"></li>
      {% endif %}

      {% endfor %}
    </ul>
  </div>
</nav>
{% endif %}

{# Navbar for auxiliaries (Lidar, FRAM, Weather Station) #}
{% if array_element=='Auxiliary' %}
<nav class="second-nav navbar navbar-expand-lg navbar-dark nav-pills fixed-top" style="z-index:1029"
  aria-label="Main navigation bar">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler2"
    aria-controls="navbarToggler2" aria-expanded="false" aria-label="Toggle navigation2">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarToggler2">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      {% set lsts_subitems = [ {'name': 'Lidar', 'label': 'Lidar'},
      {'name': 'FRAM', 'label': 'FRAM'}, {'name': 'Weather Station', 'label':
      'Weather Station'}, ]
      %}

      {% for item in lsts_subitems %}
      <li class="nav-subitem px-1 d-flex align-items-center{% if active_subitem==item.name %} active{% endif %}"
        id="{{ item.name | replace('_', '-') }}-nav">
        <a class="nav-link text-center" href="/{{ array_element }}/{{ item.name }}"
          style="white-space: normal; line-height: 1.2">{{ item.label }}</a>
      </li>

      {% if not loop.last %}
      <li class="nav-separator mx-2 my-1"></li>
      {% endif %}

      {% endfor %}
    </ul>
  </div>
</nav>
{% endif %}
