{% from "filters/_matchType.html" import render_match_type  %}

<div class="filter-group">
    <label>{{ _("Locations") }}</label>
    {{ render_match_type("location-match-type", filters.selected_location_match_type)}}

    <div class="multi-select-wrapper"
         data-placeholder="{{ _('All Locations') }}"
         data-single-format="{name}"
         data-multi-format="{{ _('{count} locations selected') }}"
         data-match-type-id="location-match-type"
         data-searchable="true"
         data-search-placeholder="{{ _('Search locations…') }}"
        >
        <div class="multi-select-header" onclick="toggleMultiSelect(this)">
            <span class="selected-text">{{ _("All Locations") }}</span>
            <span class="arrow">▼</span>
        </div>
        <div class="multi-select-options">
            {% for location_name in filters.location_names %}
            <label class="multi-select-option">
                <input type="checkbox"
                       name="location"
                       value="{{ location_name }}"
                       data-label="{{ location_name }}"
                       {% if location_name in filters.selected_location_names %}checked{% endif %}
                       onchange="updateMultiSelectText(this)">
                <span>{{ location_name }}</span>
            </label>
            {% endfor %}
        </div>
    </div>

    <div class="location-proximity-filter">
        <label class="proximity-label">{{ _("Proximity Search") }}</label>
        <div class="location-autocomplete-wrapper">
            <input type="text"
                   id="location-search"
                   class="location-search-input"
                   placeholder="{{ _('Search for a location…') }}"
                   value="{{ filters.selected_proximity_location or '' }}"
                   autocomplete="off">
            <div id="location-suggestions" class="location-suggestions"></div>
        </div>
        <div class="distance-input-wrapper">
            <label for="proximity-distance">{{ _("Within (%(unit)s):", unit=filters.selected_distance_unit_label) }}</label>
            <input type="number"
                   id="proximity-distance"
                   name="proximity-distance"
                   min="0.1"
                   step="0.1"
                   value="{{ filters.selected_proximity_distance or '' }}"
                   placeholder="10">
        </div>
        <input type="hidden" id="proximity-lat" name="proximity-lat" value="{{ filters.selected_proximity_lat or '' }}">
        <input type="hidden" id="proximity-lon" name="proximity-lon" value="{{ filters.selected_proximity_lon or '' }}">
        <input type="hidden" id="proximity-location" name="proximity-location" value="{{ filters.selected_proximity_location or '' }}">
    </div>
</div>