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

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

{% block content %}
  <div class="card mb-3">
    <div class="card-body">
      <p class="text-muted">
        {% trans "Type the communities of a route (separated by spaces or commas; standard, extended, large or a well-known name such as no-export) to see which community list entries match it, and in which sequence. An entry matches when the route carries its community, whatever else it carries. The results update as you type." %}
      </p>
      <form method="get" action="{% url 'plugins:netbox_routing_plugin:community_match' %}"
            hx-get="{% url 'plugins:netbox_routing_plugin:community_match' %}"
            hx-trigger="input from:#community-match-q delay:250ms, change from:#community-match-all, submit"
            hx-target="#community-match-results"
            hx-push-url="true">
        <div class="row g-2 align-items-center">
          <div class="col-md-6">
            <input type="search" id="community-match-q" name="q" value="{{ q }}" class="form-control"
                   placeholder="65000:100 no-export rt:65000:1" autocomplete="off" autofocus>
          </div>
          <div class="col-auto">
            <label class="form-check">
              <input type="checkbox" id="community-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="community-match-results">
    {% include 'netbox_routing_plugin/community_match_results.html' %}
  </div>
{% endblock content %}