{% load i18n %}
<form method="get" action="{% url 'govplan:search' %}" class="ajaxified" data-container="#govplan-searchresult-{{ instance.id }}" data-modalcontainer="#govplan-searchmodal-{{ instance.id }}">
  <div class="input-group">
    <input type="text" name="q" class="form-control" aria-label="{% translate 'Search query' %}" placeholder="{% translate 'Search query' %}">
    <select name="status" class="form-select">
      <option value="">{% translate "Filter status" %}</option>
      {% for status, label in status_list %}
        <option value="{{ status }}">{{ label }}</option>
      {% endfor %}
    </select>
    <button class="btn btn-outline-secondary" type="submit">
      {% translate "Search" %}
    </button>
  </div>
  {% if instance.government_id %}
    <input type="hidden" name="government" value="{{ instance.government_id }}"/>
  {% endif %}
</form>

<div class="modal fade" id="govplan-searchmodal-{{ instance.id }}">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{% trans "Search results" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}">
        </button>
      </div>
      <div class="modal-body">
        <div id="govplan-searchresult-{{ instance.id }}"></div>
      </div>
    </div>
  </div>
</div>
