{% load widget_tweaks %}
{% load poi_filters %}
{% load i18n %}
{% if current_menu_item == "events_form" %}
    {% render_field form.has_not_location class+='inline-block' %}
    <label class="secondary !inline"
           for="{{ form.has_not_location.id_for_label }}">
        {{ form.has_not_location.label }}
    </label>
    <div id="meeting-url-block"
         class="{% if not form.has_not_location.value %}hidden{% endif %}">
        <label for="{{ form.meeting_url.id_for_label }}">
            {{ form.meeting_url.label }}
        </label>
        {% render_field form.meeting_url class+="input w-full" %}
    </div>
{% endif %}
{% if current_menu_item == "contacts" %}
    <div class="help-text">
        {{ help_text }}
    </div>
{% endif %}
<div id="location-block"
     class="{% if form.has_not_location.value %}hidden{% endif %}">
    {% comment %}
            This is not for="{{ form.location.id_for_label }}" because the element with that id is a hidden input containing the locations id.
            The visible input element is poi-query-input (created a few lines further down) and updates the hidden input on user interaction.
    {% endcomment %}
    <label for="poi-query-input">
        {{ form.location.label }}
    </label>
    {% if archived %}
        {% if poi %}
            <div class="text-lg">
                {{ poi|poi_translation_title:current_language }}
            </div>
        {% endif %}
    {% else %}
        {% translate "Select a location" as poi_title_placeholder %}
        <div class="relative my-2">
            <input id="poi-query-input"
                   type="search"
                   autocomplete="off"
                   class="pr-8 appearance-none block w-full bg-white text-gray-800 placeholder-gray-800 border border-gray-400 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:placeholder-gray-600"
                   {% if form.disabled %}disabled{% endif %}
                   placeholder="{% if poi %}{{ poi|poi_translation_title:current_language }}{% else %}{{ poi_title_placeholder }}{% endif %}"
                   data-url="{% url 'search_poi_ajax' region_slug=request.region.slug %}"
                   data-region-slug="{{ request.region.slug }}"
                   data-default-placeholder="{{ poi_title_placeholder }}" />
            <div class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-800">
                <button id="poi-remove"
                        title="{% translate "Remove location" %}"
                        {% if form.disabled %}disabled{% endif %}>
                    <i icon-name="pencil" class="h-5 w-5"></i>
                </button>
            </div>
        </div>
        <p class="text-sm italic block mt-2 mb-2">
            {% if current_menu_item == "events_form" %}
                {{ help_text }}
            {% endif %}
        </p>
        <div class="relative" id="poi-query-result">
            {% include "_poi_query_result.html" %}
        </div>
        {% if current_menu_item == "contacts" %}
            <div id="info-location-mandatory"
                 class="py-2 {% if poi %}hidden{% endif %}">
                <i icon-name="alert-circle" class="h-5 w-5"></i>
                <span class="help-text italic align-middle">
                    {% trans "This field cannot be empty. Please select a location." %}
                </span>
            </div>
        {% endif %}
    {% endif %}
    {% include "ajax_poi_form/_poi_address_container.html" with disabled=form.has_not_location.value %}
    <div id="poi-ajax-success-message"
         class="bg-green-100 border-l-4 border-green-500 text-green-800 px-4 py-3 hidden">
        {% trans "The new location was successfully created." %}
    </div>
    <div id="poi-ajax-error-message"
         class="bg-red-100 border-l-4 border-red-500 text-red-700 px-4 py-3 hidden">
        {% trans "An error occurred." %}
    </div>
    <div id="poi-form-widget">
    </div>
</div>