{% load i18n %}

<div class="row mb-3">
  <div class="col-auto d-print-none">
    <div class="input-group input-group-flat me-2 quicksearch" hx-disinherit="hx-select hx-swap">
      <input type="search" results="5" name="q" id="{{ search_id }}" class="form-control"
             placeholder="{% trans "Quick search" %}"
             hx-get="{{ table.htmx_url }}"
             hx-target="#{{ results_id }}"
             hx-trigger="keyup changed delay:500ms, search"/>
      {% trans "Kentik matches" as kentik_label %}
      {% trans "NetBox matches" as netbox_label %}
      <span class="input-group-text py-1 px-3 ms-3 rounded d-flex align-items-center gap-4">
        {% if graph_kind == "sites" %}
          {% include 'netbox_kentik/inc/match_graph.html' with label=kentik_label matched=rrc.num_matched_kentik_sites total=rrc.total_kentik_sites %}
          {% include 'netbox_kentik/inc/match_graph.html' with label=netbox_label matched=rrc.num_matched_netbox_sites total=rrc.total_netbox_sites %}
        {% else %}
          {% include 'netbox_kentik/inc/match_graph.html' with label=kentik_label matched=rrc.num_matched_kentik_devices total=rrc.total_kentik_devices %}
          {% include 'netbox_kentik/inc/match_graph.html' with label=netbox_label matched=rrc.num_matched_netbox_devices total=rrc.total_netbox_devices %}
        {% endif %}
      </span>
    </div>
  </div>

  <div class="col-auto ms-auto d-print-none">
    {% if request.user.is_authenticated and table_modal %}
      <div class="table-configure btn-group">
        <button type="button" data-bs-toggle="modal" title="{% trans "Configure Table" %}" data-bs-target="#{{ table_modal }}" class="btn">
          <i class="mdi mdi-cog"></i> {% trans "Configure Table" %}
        </button>
      </div>
    {% endif %}
  </div>
</div>