{% -- Generate forms for the actual switch of the currently active interface %}

{% -- For the system interface %}
<form id="switch_interface_form_{{ getSystemInterfaceId() }}" method="POST" action="{{ ntop.getHttpPrefix() }}/lua/system_stats.lua?ifid={{ getSystemInterfaceId() }}">
  <input name="switch_interface" type="hidden" value="1" />
  <input name="csrf" type="hidden" value="{{ ntop.getRandomCSRFValue() }}" />
</form>

{% -- For all other interfaces %}
{% for k, v in pairsByValues(ifnames, asc) do %}
<form id="switch_interface_form_{{ k }}" method="POST" action="{{ action_urls[k] }}">
  <input name="switch_interface" type="hidden" value="1" />
  <input name="csrf" type="hidden" value="{{ ntop.getRandomCSRFValue() }}" />
</form>
{% end %}


{% -- Print out the interfaces dropdown %}

<li class="nav-item d-sm-flex">
  <div class="d-flex">
  <select name="interfaces-dropdown" id="interfaces-dropdown" class="selectpicker form-select-lg pb-0" 
    data-width="fit" data-live-search="true" data-live-search-placeholder="{{ i18n('search') }}" data-actions-box="true">

    {% if isAdministrator() then %}
    <option disabled>{{ i18n('system') }}</option>
    <option value="{{ getSystemInterfaceId() }}" {{ selected }} data-content="{{ i18n('system') }}" style="padding-left: 2rem !important;">{{ i18n('system') }}</option>
    {% end %}

    {% -- The Interfaces optgroup %}
    <option disabled>{{ i18n('interfaces') }}</option>

    {% for round = 1, 2 do -- First round: only physical interfaces, second round: only virtual interfaces %}
      {% for k, v in pairsByValues(ifHdescr, asc) do %}
        {% if round == 1 and ifCustom[k] then %}
          {% -- Nothing to do, this round is for physical, non-disaggregated interfaces ... %}
        {% elseif round == 2 and not ifCustom[k] then %}
          {% -- Nothing to do, this round is for disaggregated interfaces only ... %}
        {% else %}
          {% local icons, selected = {}, '' %}
	  
            {% if tonumber(k) == interface.getId() and not is_system_interface then %}
              {% selected = 'selected=""' %}
   	    {% end %}
  
            {% if pcapdump[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-file'></i>" %}
            {% elseif packetinterfaces[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-ethernet'></i>" %}
            {% elseif zmqinterfaces[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-bezier-curve'></i>" %} {% --broadcast-tower %}
            {% end %}

            {% if views[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-eye'></i>" %}
            {% end %}

            {% if dynamic[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-code-branch'></i>" %}
            {% end %}

            {% if drops[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-tint'></i>" %}
            {% end %}

            {% if recording[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-hdd'></i>" %}
            {% end %}

            <option data-tokens="{{ k }}" value="{{ k }}" {{ selected }} data-content="{{ table.concat(icons, ' ')}} {{ shortenCollapse(ifHdescr[k]) }}" style="padding-left: 2rem !important;">{{ ifHdescr[k] }}</option>
          {% end %}
        {% end %}
      {% end %}
  {% if ntop.isPro() and isAdministrator() and (table.len(infrastructures) > 0) then %}  
    <option disabled>{{ i18n('infrastructure_dashboard.infrastructure') }}</option>
    {% for k,v in pairs(infrastructures or {}) do %}
      <option value="{{ v }}" href="#" data-content="{{ "<i class='fas fa-building'></i> "..k }}"> {{ v }}</option>
    {% end %} 
  {% end %}
  </select>
</div>
</li>


{% -- Print the observation point dropdown %}
{% if(observationPoints ~= nil) then %}
  {% for _, v in pairsByKeys(observationPoints, asc) do %}
  <form id="switch_interface_form_observation_point_{{ v["obs_point"] }}" method="POST" action="{{ ntop.getHttpPrefix() .. "/lua/flows_stats.lua" .. "" }}?ifid={{ interface.getId() }}&observationPointId={{ v["obs_point"] }}" >
    <input name="switch_interface" type="hidden" value="1" />
    <input name="csrf" type="hidden" value="{{ ntop.getRandomCSRFValue() }}" />
  </form>
  {% end %}

  <li class="nav-item d-sm-flex">
    <div class="d-flex">
      <select name="observationpoint-dropdown" id="observationpoint-dropdown" class="selectpicker form-select-lg pb-0" data-width="fit" data-live-search="true" data-live-search-placeholder="{{ i18n('search') }}" data-actions-box="true">
      {% for _, v in pairsByField(observationPoints, 'obs_point', asc) do %}
        {% local selected = '' %}
        {% if((observationPointId ~= nil) and (tostring(v["obs_point"]) == tostring(observationPointId))) then selected = 'selected' end %}
        <option value="{{ v["obs_point"] }}" {{ selected }}>{{ getObsPointAlias(v["obs_point"], true) }}</option>
      {% end %}
        </optgroup>
      </select>
    </div>
  </li>
{% end %}

<script type="text/javascript">
  // initialize the selectpicker
  $('#interfaces-dropdown').selectpicker();
  $('#observationpoint-dropdown').selectpicker();
   
  $(`#observationpoint-dropdown`).on('change', function(e) {
    const selectedValue = $(this).val();
    $('#switch_interface_form_observation_point_'+ selectedValue).submit();
  });

  $("#interfaces-dropdown").on("change", function(e) {
    const selectedValue = $(this).val();

    if(isNaN(Number(selectedValue)) ){
      window.location.replace(selectedValue);
    }else{
      toggleSystemInterface($('#switch_interface_form_' + selectedValue)); }
  });

  const toggleObservationPoint = ($form = null) => {
    if($form != null) 
      $form.submit();
  }

</script>