{% extends 'base/layout.html' %}
{% load i18n %}

{% block title %}{% trans "Prefix Match" %}{% endblock %}

{% block content %}
  <div class="card mb-3">
    <div class="card-body">
      <p class="text-muted">
        {% trans "Type a prefix or an address to see which prefix list entries match it, and in which sequence. The results update as you type." %}
      </p>
      <form method="get" action="{% url 'plugins:netbox_routing_plugin:prefix_match' %}"
            hx-get="{% url 'plugins:netbox_routing_plugin:prefix_match' %}"
            hx-trigger="input from:#prefix-match-q delay:250ms, change from:#prefix-match-all, submit"
            hx-target="#prefix-match-results"
            hx-push-url="true">
        <div class="row g-2 align-items-center">
          <div class="col-md-6">
            <input type="search" id="prefix-match-q" name="q" value="{{ q }}" class="form-control"
                   placeholder="10.0.0.0/24, 192.0.2.1, 2001:db8::/32" autocomplete="off" autofocus>
          </div>
          <div class="col-auto">
            <label class="form-check">
              <input type="checkbox" id="prefix-match-all" name="all" value="1" class="form-check-input"{% if show_all %} checked{% endif %}>
              <span class="form-check-label">{% trans "Include the lists with no match" %}</span>
            </label>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div id="prefix-match-results">
    {% include 'netbox_routing_plugin/prefix_match_results.html' %}
  </div>
{% endblock content %}