{% extends "site/base.html" %}
{% load i18n util static %}

{% block header %}
{% with page_title=request|make_page_title_for_advanced_search_result %}{{ block.super }}{% endwith %}
{% endblock %}

{% block content %}

<div class="advanced-search-view" data-campus-icon-path="{% static "campus.svg" %}">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class"nav-item">
      <a href="#ix" aria-controls="ix" role="tab" data-bs-toggle="tab" class="nav-link {% if request.GET.reftag == "ix" or not request.GET.reftag %}active{% else %}inactive{% endif %}">{% trans "Exchanges" %}</a>
    </li>
    <li role="presentation" class"nav-item">
      <a href="#net" aria-controls="net" role="tab" data-bs-toggle="tab" class="nav-link {% if request.GET.reftag == "net" %}active{% else %}inactive{% endif %}">{% trans "Networks"  %}</a>
    </li>
    <li role="presentation" class"nav-item">
      <a href="#fac" aria-controls="fac" role="tab" data-bs-toggle="tab" class="nav-link {% if request.GET.reftag == "fac" %}active{% else %}inactive{% endif %}">{% trans "Facilities" %}</a>
    </li>
    <li role="presentation" class"nav-item">
      <a href="#org" aria-controls="org" role="tab" data-bs-toggle="tab" class="nav-link {% if request.GET.reftag == "org" %}active{% else %}inactive{% endif %}">{% trans "Organizations" %}</a>
    </li>
    <li role="presentation" class"nav-item">
      <a href="#campus" aria-controls="campus" role="tab" data-bs-toggle="tab" class="nav-link {% if request.GET.reftag == "campus" %}active{% else %}inactive{% endif %}">
        <div
        data-bs-toggle="tooltip"
        data-placement="top"
        title="{{ campus_help_text }}">
          {% trans "Campus" %}
      </div>
      </a>
    </li>
  </ul>

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane{% if request.GET.reftag == "ix" or not request.GET.reftag %} active{% endif %}" id="ix">
      {% include "site/advanced-search-ix.html" with row_limit=row_limit%}
    </div>
    <div role="tabpanel" class="tab-pane{% if request.GET.reftag == "net"%} active{% endif %}" id="net">
      {% include "site/advanced-search-net.html" with row_limit=row_limit%}
    </div>
    <div role="tabpanel" class="tab-pane{% if request.GET.reftag == "fac" %} active{% endif %}" id="fac">
      {% include "site/advanced-search-fac.html" with row_limit=row_limit%}
    </div>
    <div role="tabpanel" class="tab-pane{% if request.GET.reftag == "org" %} active{% endif %}" id="org">
      {% include "site/advanced-search-org.html" with row_limit=row_limit%}
    </div>
    <div role="tabpanel" class="tab-pane{% if request.GET.reftag == "campus" %} active{% endif %}" id="campus">
      {% include "site/advanced-search-campus.html" with row_limit=row_limit%}
    </div>

  <script language="javascript" type="text/javascript">
  twentyc.editable.target.get("advanced_search").prototype.limit = {{ row_limit }};
  $(window).bind("load", function() {

    /* wire the org presence filter configuration (does not matter, present,
     * not present) to the org present filter.
     */

    $('.org_present_input').each(function() {
      var filter_input = $(this);
      var filter_select = filter_input.parent().find('.org_present_filter')
      var editable_input = filter_input.children('div')
      filter_select.on('change', function() {
        let val = $(this).val()
        if(val )
          editable_input.data('edit-name', val).attr('data-edit-name', val);
        else {
          editable_input.removeData('edit-name').removeAttr('data-edit-name')
        }
      });

    });

    /* wire the net presence filter configuration (does not matter, present,
     * not present) to the net present filter.
     */

    $('.net_present_input').each(function() {
      var filter_input = $(this);
      var filter_select = filter_input.parent().find('.net_present_filter')
      filter_select.on('change', function() {
        let val = $(this).val()
        if(val )
          filter_input.data('edit-name', val).attr('data-edit-name', val);
        else {
          filter_input.removeData('edit-name').removeAttr('data-edit-name')
        }
      });

    });



    var run_search = function() {

      var reftag = $.urlParam("reftag")
      if(reftag == "net" || reftag == "ix" || reftag == "fac" || reftag == "org" || reftag == "campus") {
        var searchForm = $('[data-edit-target="advanced_search:'+reftag+'"]')
        searchForm.editable("loading-shim","show");
        twentyc.data.loading_done(function() {
          var target = twentyc.editable.target.instantiate(searchForm);
          target.sender = searchForm
          $(target).on("success", function() {
            searchForm.editable("loading-shim","hide");
            searchForm.parent().find("[data-export-format]").each(function() {
              var tag = $(this).data("export-tag");
              var format = $(this).data("export-format");
              $(this).removeClass("d-none")
              $(this).attr("href", "/export/advanced-search/"+tag+"/"+format+"?"+PeeringDB.advanced_search_result[tag].param);
            })
          });
          $(target).on("error", function(ev, d) {
            searchForm.editable("loading-shim","hide");
            if(d && d.info == "404 Not Found") {
              searchForm.find(".results-empty").show();
            } else {
              searchForm.trigger("action-error", d);
            }
          });
          target.search();
        });
      }
    };

    twentyc.data.load("enum/traffic", {callback:function() {
      twentyc.data.load("sponsors", {callback:function() {
        twentyc.data.load("campus_facilities", {callback:run_search})
      }});
    }});


  });
  </script>
</div>

{% endblock %}