{% extends "fellchensammlung/base.html" %}
{% load i18n %}
{% load custom_tags %}
{% load static %}

{% block title %}
    <title>{{ site_title }}</title>
{% endblock %}

{% block og_title %}
    <meta property="og:title" content="{{ site_title }} - Notfellchen"/>
{% endblock %}
{% block description %}
    <meta name="description" content="{{ site_description }}">
{% endblock %}
{% block og_description %}
    <meta property="og:description" content="{{ site_description }}">
{% endblock %}
{% block og_image %}
    <meta property="og:image" content="{% host %}{% static 'fellchensammlung/img/link_preview.png' %}"/>{% endblock %}
{% block canonical_url %}{% host %}{{ canonical_url }}{% endblock %}



{% block content %}
    {% get_current_language as LANGUAGE_CODE_CURRENT %}
    <div class="columns block">
        <!--- Map -->
        <div class="column is-two-thirds">
            <div style="height: 75vh">
                {% include "fellchensammlung/partials/partial-map.html" %}
            </div>
        </div>
        <!--- Search Form -->
        <div class="column">
            <div class="block">
                <p>
                    <i>
                        {% blocktranslate with number_of_adoption_notices=adoption_notices|length %}
                            {{ number_of_adoption_notices }}
                            Vermittlungen gefunden{% endblocktranslate %}
                    </i>
                </p>
                <form method="post" autocomplete="off">
                    {% csrf_token %}
                    <input type="hidden" name="longitude" maxlength="200" id="longitude">
                    <input type="hidden" name="latitude" maxlength="200" id="latitude">
                    <input type="hidden" id="place_id" name="place_id">
                    <!--- https://docs.djangoproject.com/en/5.2/topics/forms/#reusable-form-templates -->
                    {{ search_form }}
                    {% if searched %}
                        <div class="field is-grouped">
                            <button class="button is-primary" type="submit" value="search" name="search">
                                <i class="fas fa-search fa-fw"></i> {% trans 'Suchen' %}
                            </button>
                            {% if not subscribed_search %}
                                <button class="button" type="submit" name="subscribe_to_search">
                                    <i class="fas fa-bell fa-fw"></i> {% trans 'Suche abonnieren' %}
                                </button>
                            {% else %}
                                <button class="button" type="submit" value="{{ subscribed_search.pk }}"
                                        name="unsubscribe_to_search">
                                    <i class="fas fa-bell-slash fa-fw"></i> {% trans 'Suche nicht mehr abonnieren' %}
                                </button>
                            {% endif %}
                        </div>
                        {% if not subscribed_search %}
                            <div class="block">{% translate 'Wenn du die Suche abonnierst, wirst du für neue Vermittlungen, die den Kriterien entsprechen, benachrichtigt.' %}</div>
                        {% endif %}
                    {% else %}
                        <button class="button is-primary is-fullwidth" type="submit" value="search" name="search">
                            <i class="fas fa-search  fa-fw"></i> {% trans 'Suchen' %}
                        </button>
                    {% endif %}

                </form>
            </div>
            {% if place_not_found %}
                <div class="block notification is-warning">
                    <p>
                        {% trans 'Ort nicht gefunden' %}
                    </p>
                </div>
            {% endif %}
        </div>
    </div>
    <div class="block">
        {% include "fellchensammlung/lists/list-adoption-notices.html" %}
    </div>

    <script>
        $(document).ready(function () {
            const $locationInput = $("#id_location_string");

            $locationInput.wrap("<div class='dropdown' id='location-result-list'></div>");
            const dropdown = $("#location-result-list");
            $locationInput.wrap("<div class='dropdown-trigger'></div>");
            $("<div class='dropdown-content' id='results'></div>").insertAfter($locationInput);
            const $resultsList = $("#results");
            $resultsList.wrap("<div class='dropdown-menu'></div>");


            $locationInput.on("input", function () {
                const query = $.trim($locationInput.val());

                if (query.length < 3) {
                    dropdown.removeClass("is-active");
                    return;
                }

                $.ajax({
                    url: "{{ geocoding_api_url }}/",
                    data: {
                        q: query,
                        limit: 5,
                        lang: "{{ LANGUAGE_CODE_CURRENT }}",
                        lat: 51.95,
                        lon: 10.26,
                        layer: "city"
                    },
                    method: "GET",
                    dataType: "json",
                    success: function (data) {
                        $resultsList.empty();
                        dropdown.addClass("is-active");

                        if (data && data.features) {
                            const locations = data.features.slice(0, 5);

                            $.each(locations, function (index, location) {
                                const $listItem = $("<div>")
                                    .addClass("dropdown-item")
                                    .addClass("result-item")
                                    .text(geojson_to_summary(location))
                                    .on("click", function () {
                                        $locationInput.val(geojson_to_searchable_string(location));
                                        $resultsList.empty()
                                        dropdown.removeClass("is-active");
                                    });

                                $resultsList.append($listItem);
                            });
                        }
                    },
                    error: function () {
                        $resultsList.html('<li class="result-item">{%  trans 'Error fetching data. Please try again.' %}</li>');
                    }
                });
            });
        });

    </script>
{% endblock %}
