{% load i18n %}
{% load static %}
{% load widget_tweaks %}
{% load content_filters %}
{% load poi_filters %}
<form id="event-filter-form">
    {% get_current_language as LANGUAGE_CODE %}
    {% get_language LANGUAGE_CODE as current_language %}
    {% include "../_keep_pagination_data.html" %}
    <div class="flex flex-wrap p-4 items-start">
        <div class="w-1/3 pr-6">
            <label>
                {% translate "Time range" %}
            </label>
            <div class="flex flex-wrap">
                {% render_field filter_form.events_time_range|add_error_class:"border-red-500" %}
            </div>
            <div id="events-custom-time-range-filter" class="hidden">
                <div class="flex flex-wrap items-end">
                    <div class="w-1/2 pr-1">
                        <label for="date_from" class="secondary">
                            {% translate "From" %}
                        </label>
                        {% render_field filter_form.date_from|add_error_class:"border-red-500" %}
                    </div>
                    <div class="w-1/2">
                        <label for="date_to" class="secondary">
                            {% translate "To" %}
                        </label>
                        {% render_field filter_form.date_to|add_error_class:"border-red-500" %}
                    </div>
                </div>
            </div>
        </div>
        <div class="w-1/3 pr-6">
            <label>
                {% translate "Location" %}
            </label>
            <label for="poi-query-input" class="secondary">
                {% translate "Event location" %}
            </label>
            <div class="relative my-2">
                {% translate "Search" as search_placeholder %}
                <input id="poi-query-input"
                       type="search"
                       autocomplete="off"
                       class="no-new-poi"
                       placeholder="{% if filter_poi %}{{ filter_poi|poi_translation_title:current_language }}{% else %}{{ search_placeholder }}{% endif %}"
                       data-url="{% url 'search_poi_ajax' region_slug=request.region.slug %}"
                       data-region-slug="{{ request.region.slug }}"
                       data-default-placeholder="{{ search_placeholder }}" />
                <div class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-800">
                    <a id="poi-remove" title="{% translate "Empty query input" %}">
                        <i icon-name="trash-2" class="h-5 w-5"></i>
                    </a>
                </div>
            </div>
            {% render_field filter_form.poi_id id="id_location" class+="hidden" %}
            <div class="relative" id="poi-query-result">
                {% include "events/_poi_query_result.html" %}
            </div>
        </div>
        <div class="w-1/3">
            <label>
                {% translate "All day events" %}
            </label>
            <div class="flex flex-wrap">
                {% render_field filter_form.all_day|add_error_class:"border-red-500" class+="leading-normal rounded" %}
            </div>
            <label>
                {% translate "Recurring events" %}
            </label>
            <div class="flex flex-wrap">
                {% render_field filter_form.recurring|add_error_class:"border-red-500" class+="leading-normal rounded" %}
            </div>
        </div>
    </div>
    <div class="w-full flex p-4 justify-end gap-4">
        <a id="filter-reset" class="btn btn-ghost">{% translate "Reset filter" %}</a>
        <button name="filter" class="btn">
            {% translate "Apply filter" %}
        </button>
    </div>
</form>
