{% extends '@Contao/block_unsearchable' %}

{% block content %}
    <form class="filter" method="get">
        <div class="formbody">
            <input type="hidden" name="FORM_SUBMIT" value="{{ formSubmit }}">
            <div class="widget widget-text">
                <input type="text" name="filter_keywords" placeholder="Jobtitel" value="{{ formSetFilters.filter_keywords ?? '' }}">
            </div>
            <div class="widget widget-autocomplete">
                <input type="hidden" id="filter-city-label-{{ id }}" name="filter_city_label" value="{{ formSetFilters.filter_city_label }}">
                <select id="filter-city-{{ id }}" name="filter_city" data-placeholder="{{ formSetFilters.filter_city_label ?? 'PLZ/Ort' }}" autocomplete="off">
                    <option value="{{ formSetFilters.filter_city ?? '' }}">{{ formSetFilters.filter_city_label ?? 'PLZ/Ort' }}</option>
                </select>
            </div>
            <div class="widget widget-text">
                <input type="text" name="filter_radius" placeholder="Suchradius in km" value="{{ formSetFilters.filter_radius ?? '' }}">
            </div>
            {% if filterVertragsarten is defined %}
                <div class="widget widget-select">
                    <select name="filter_vertragsart">
                        <option value="">Art der Anstellung</option>
                        {% for vertragsart in filterVertragsarten %}
                            <option value="{{ vertragsart.ObjectUuid }}"{% if formSetFilters.filter_vertragsart is defined and formSetFilters.filter_vertragsart == vertragsart.ObjectUuid %} selected{% endif %}>{{ vertragsart.Bezeichnung }}</option>
                        {% endfor %}
                    </select>
                </div>
            {% endif %}
            {% if filterAbteilung is defined %}
                <div class="widget widget-select">
                    <select name="filter_abteilung">
                        <option value="">Unternehmensbereich / Abteilung</option>
                        {% for abteilung in filterAbteilung %}
                            <option value="{{ abteilung.ObjectUuid }}"{% if formSetFilters.filter_abteilung is defined and formSetFilters.filter_abteilung == abteilung.ObjectUuid %} selected{% endif %}>{{ abteilung.Bezeichnung }}</option>
                        {% endfor %}
                    </select>
                </div>
            {% endif %}
            <div class="widget widget-submit">
                <button type="submit">Suchen</button>
            </div>
        </div>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new TomSelect("#filter-city-{{ id }}",{
                allowEmptyOption: true,
                create: false,
                valueField: 'latLon',
                labelField: 'name',
                searchField: 'name',
                load: function(query, callback) {
                    var url = '_geodb/getLatLon?q=' + encodeURIComponent(query);
                    fetch(url)
                        .then(response => response.json())
                        .then(json => {
                            callback(json.items);
                        }).catch(() => {
                        callback();
                    });
                },
                onChange: function (values) {
                    let target = document.getElementById('filter-city-label-{{ id }}');
                    if (target !== undefined && this.activeOption.innerText !== undefined)
                    {
                        target.value = this.activeOption.innerText
                    }
                }
            });
        }, false);
    </script>

    {% if jobs is not defined %}
        <p>Es wurden keine Stellenangebote gefunden!</p>
    {% else %}
        <div class="jobs">
            <ul>
            {% for job in jobs %}
                <li>
                    <h3>{{ job.Bezeichnung }}</h3>
                    <div class="meta">
                        <dl>
                            <dt>Einsatzort:</dt><dd>{{ job.EinsatzortPlz }} {{ job.EinsatzortOrt }}</dd>
                            <dt>Vertragsart:</dt><dd>{{ job.Vertragsarten }}</dd>
                            <dt>Beginn:</dt><dd>{{ job.BeginnAbSofort ? 'ab sofort' : (job.Beginn ? job.Beginn|date("d.m.Y") : '') }}</dd>
                            <dt>Eintrag vom:</dt><dd>{{ job.DatumAb ? job.DatumAb|date("d.m.Y") : '' }}</dd>
                        </dl>
                    </div>
                    <p class="details-link">
                        {% if detailsLink is defined %}
                            <a href="{{ detailsLink }}?id={{ job.StelleUuid }}">Details</a>
                        {% else %}
                            <a href="https://alox-personal.europersonal.com/stelle/{{ job.LinkSlug }}-{{ job.StelleUuid }}">Details</a>
                        {% endif %}
                    </p>
                </li>
            {% endfor %}
            </ul>
            {{ pagination|raw }}
        </div>
    {% endif %}
{% endblock %}