{% extends "templates/base.html.j2" %}

{% block content %}
<div id="hg-parent" class="mx-auto">
  <div class="container animsition mw-lg-75 mw-xl-50" data-animsition-out-class="fade-out-right"
    data-animsition-in-class="fade-in-left" id="hg-form">
    <div class="container-fluid d-flex justify-content-center mb-4 text-center">
      {% import "templates/title.html.j2" as title %}
      {{ title.title(branding, primary_asn, size_title="h1", size_subtitle="h4") }}
    </div>
    <form class="needs-validation" onsubmit="return false" name="queryform" id="lgForm" action="?" method="POST"
      novalidate>
      <div class="form-row mb-4">
        <div class="col-md col-sm-12 mb-4 mb-md-0">
          <select multiple class="form-control form-control-lg hg-select" id="location" data-live-search="true"
            title="{{ branding.text.query_location }}">
            {% for (netname, loc_params) in networks.items() %}
            <optgroup label="{{ netname }}">
              {% for param in loc_params %}
              <option id='{{ param.hostname }}' value='{{ param.hostname }}'
                data-tokens='{{ netname }} {{param.hostname}}' data-display-name="{{ param.display_name }}"
                data-netname="{{ netname }}">
                {{ param.display_name }}</option>
              {% endfor %}
            </optgroup>
            {% endfor %}
          </select>
        </div>
        <div class="col-md col-sm-12">
          <select class="form-control form-control-lg hg-select custom-select-lg" id="query_type"
            title="{{ branding.text.query_type }}" required>
            {% if features.bgp_route.enable %}
            <option id="bgp_route" value="bgp_route" data-display-name="{{ branding.text.bgp_route }}">
              {{ branding.text.bgp_route }}</option>
            {% endif %}
            {% if features.bgp_community.enable %}
            <option id="bgp_community" value="bgp_community" data-display-name="{{ branding.text.bgp_community }}">
              {{ branding.text.bgp_community }}</option>
            {% endif %}
            {% if features.bgp_aspath.enable %}
            <option id="bgp_aspath" value="bgp_aspath" data-display-name="{{ branding.text.bgp_aspath }}">
              {{ branding.text.bgp_aspath }}</option>
            {% endif %}
            {% if features.ping.enable %}
            <option id="ping" value="ping" data-display-name="{{ branding.text.ping }}">{{ branding.text.ping }}
            </option>
            {% endif %}
            {% if features.traceroute.enable %}
            <option id="traceroute" value="traceroute" data-display-name="{{ branding.text.traceroute }}">
              {{ branding.text.traceroute }}</option>
            {% endif %}
          </select>
        </div>
      </div>
      <div class="form-row mb-4" id="hg-row-2">
        <div id="hg-container-vrf"></div>
        <div class="col" id="hg-container-target">
          <div class="input-group input-group-lg">
            <input class="form-control" type="text" placeholder="{{ branding.text.query_target }}"
              aria-label="{{ branding.text.query_target }}" aria-describedby="query_target" id="query_target" required>
            <div class="input-group-append" id="hg-target-append">
              <button class="btn btn-primary" id="hg-submit-button" type="submit">
                <div id="hg-submit-icon">
                  <i class="remixicon-search-line"></i>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  {% include "templates/results.html.j2" %}
</div>
{% endblock %}