{% set isReadonly = isReadonly|default(false) %}

<div {{ attributes.defaults({
    id: 'offer-location-component',
    class: 'border-t border-gray-200 dark:border-gray-800 mt-6 pt-6',
    'data-controller': isReadonly ? '' : 'ferienpass--admin-mapbox',
    'data-action': 'ferienpass--admin-mapbox:dirty->live#action',
    'data-live-action-param': 'setDirty',
    'data-ferienpass--admin-mapbox-token-value': mapboxToken,
    'data-ferienpass--admin-mapbox-meeting-lat-value': meetingLat,
    'data-ferienpass--admin-mapbox-meeting-lng-value': meetingLng
}) }}>
    <div class="space-y-6">
        <div class="grid grid-cols-1 sm:grid-cols-12 gap-6">
            <div class="sm:col-span-6">
                <label for="meeting-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                    {{ 'offers.label.meetingAddress'|trans({}, 'admin') }}
                </label>
                <div class="mt-1">
                    <input type="text" id="meeting-address"
                           {% if isReadonly %}readonly disabled{% else %}data-model="on(input)|debounce(150)|meetingAddress" data-ferienpass--admin-mapbox-target="address"{% endif %}
                           value="{{ meetingAddress }}"
                           class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-800 dark:border-gray-700 {{ isReadonly ? 'bg-gray-50 dark:bg-gray-900 cursor-not-allowed' }}">
                </div>
                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                    {{ 'offers.help.meetingAddress'|trans({}, 'admin') }}
                </p>
            </div>

            <div class="sm:col-span-6">
                <label for="meeting-point" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                    {{ 'offers.label.meetingPoint'|trans({}, 'admin') }}
                </label>
                <div class="mt-1">
                    <input type="text" id="meeting-point"
                           {% if isReadonly %}readonly disabled{% else %}data-model="on(input)|debounce(150)|meetingPoint"{% endif %}
                           value="{{ meetingPoint }}"
                           class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-800 dark:border-gray-700 {{ isReadonly ? 'bg-gray-50 dark:bg-gray-900 cursor-not-allowed' }}">
                    <input type="hidden" data-model="on(input)|meetingLat" data-ferienpass--admin-mapbox-target="meetingLat" value="{{ meetingLat }}">
                    <input type="hidden" data-model="on(input)|meetingLng" data-ferienpass--admin-mapbox-target="meetingLng" value="{{ meetingLng }}">
                </div>
                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                    {{ 'offers.help.meetingPoint'|trans({}, 'admin') }}
                </p>
            </div>
        </div>

        <div class="relative w-full h-[420px] rounded-lg overflow-hidden border border-gray-300 dark:border-gray-700 bg-gray-50" data-live-ignore>
            <div id="map" data-ferienpass--admin-mapbox-target="map" class="w-full h-full"></div>
            <div class="absolute top-2 left-2 right-2 sm:right-auto sm:w-80 z-10">
                <mapbox-geocoder id="geocoder"
                                 data-ferienpass--admin-mapbox-target="geocoder"
                                 data-action="retrieve->ferienpass--admin-mapbox#onRetrieve"
                                 class="w-full"
                                 access-token="{{ mapboxToken }}"
                                 language="de"></mapbox-geocoder>
            </div>
        </div>

        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
            {{ 'offers.help.mapMarker'|trans({}, 'admin') }}
        </p>

        <div class="flex gap-x-4 text-sm text-gray-500 dark:text-gray-400">
            <div>Lat: <code data-ferienpass--admin-mapbox-target="meetingLatDisplay">{{ meetingLat|default('—') }}</code></div>
            <div>Lng: <code data-ferienpass--admin-mapbox-target="meetingLngDisplay">{{ meetingLng|default('—') }}</code></div>
        </div>
    </div>

    <twig:Admin:Edit:Footer :isDirty="isDirty" :isReadonly="isReadonly" :sections="sections" :section="section" :params="{uuid: offer.uuid}" :useLiveAction="true" />

    {% if message|default %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Daten gespeichert" :message="message" />
        </twig:Turbo:Stream:Prepend>
    {% endif %}
</div>
