@php
    $countyName = html_decode($listing->county?->name ?? '');
    $cityName = html_decode($listing->city?->name ?? '');
    $hasLocation = filled($countyName) || filled($cityName) || filled($listing->address);
    $locationLabel = listing_card_location($listing);
    $mapThumbUrl = listing_map_display_url($listing->google_map, 400, 180);
    $mapIsStatic = $mapThumbUrl && listing_map_is_static_image($mapThumbUrl);
    $osmViewUrl = listing_openstreetmap_view_url($listing->google_map, $locationLabel);
    $osmEmbedUrl = listing_openstreetmap_embed_url($listing->google_map);
    $canOpenMapModal = $mapThumbUrl && ($osmEmbedUrl || filled($locationLabel));
@endphp

@if ($hasLocation || $mapThumbUrl)
    <div class="listing-sidebar-location" aria-labelledby="listing-sidebar-location-title">
        <h3 class="listing-sidebar-location__title" id="listing-sidebar-location-title">
            {{ __('translate.Locality') }}
        </h3>

        <div class="listing-sidebar-location__body">
            <div class="listing-sidebar-location__info">
                <span class="listing-sidebar-location__pin" aria-hidden="true">
                    <svg width="20" height="24" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M2.55 20.25C2.13579 20.25 1.8 20.5858 1.8 21C1.8 21.4142 2.13579 21.75 2.55 21.75V20.25ZM14.95 21.75C15.3642 21.75 15.7 21.4142 15.7 21C15.7 20.5858 15.3642 20.25 14.95 20.25V21.75ZM15.75 8.5C15.75 10.1981 14.6274 12.4022 13.0703 14.2376C12.3055 15.139 11.4701 15.9098 10.6819 16.4488C9.87165 17.0029 9.2019 17.25 8.75 17.25V18.75C9.65435 18.75 10.6315 18.3005 11.5286 17.687C12.4479 17.0584 13.3804 16.1906 14.2141 15.208C15.8538 13.2752 17.25 10.7292 17.25 8.5H15.75ZM8.75 17.25C8.31285 17.25 7.64989 16.992 6.83557 16.4004C6.0463 15.8269 5.20886 15.0085 4.44153 14.0574C2.8796 12.1213 1.75 9.81691 1.75 8.11111H0.25C0.25 10.3327 1.63915 12.9727 3.27409 14.9992C4.1052 16.0294 5.03573 16.9468 5.95389 17.6139C6.84698 18.2628 7.8309 18.75 8.75 18.75V17.25ZM1.75 8.11111C1.75 4.5023 5.07541 1.75 8.75 1.75V0.25C4.43487 0.25 0.25 3.4977 0.25 8.11111H1.75ZM8.75 1.75C12.3966 1.75 15.75 4.47727 15.75 8.5H17.25C17.25 3.52273 13.0931 0.25 8.75 0.25V1.75ZM11.1 8C11.1 9.21965 10.0712 10.25 8.75 10.25V11.75C10.8529 11.75 12.6 10.0941 12.6 8H11.1ZM8.75 10.25C7.42876 10.25 6.4 9.21965 6.4 8H4.9C4.9 10.0941 6.64707 11.75 8.75 11.75V10.25ZM6.4 8C6.4 6.78035 7.42876 5.75 8.75 5.75V4.25C6.64707 4.25 4.9 5.90594 4.9 8H6.4ZM8.75 5.75C10.0712 5.75 11.1 6.78035 11.1 8H12.6C12.6 5.90594 10.8529 4.25 8.75 4.25V5.75ZM2.55 21.75H14.95V20.25H2.55V21.75Z"
                            fill="currentColor" />
                    </svg>
                </span>

                <div class="listing-sidebar-location__text">
                    @if (filled($countyName))
                        <p class="listing-sidebar-location__county">{{ $countyName }},</p>
                    @endif
                    @if (filled($cityName))
                        <p class="listing-sidebar-location__city">{{ $cityName }}</p>
                    @elseif (filled($listing->address))
                        <p class="listing-sidebar-location__city">{{ html_decode($listing->address) }}</p>
                    @endif
                </div>
            </div>

            @if ($mapThumbUrl)
                <div class="listing-sidebar-location__map">
                    @if ($canOpenMapModal)
                        <button
                            type="button"
                            class="listing-sidebar-location__map-trigger"
                            data-bs-toggle="modal"
                            data-bs-target="#listingLocationMapModal"
                            aria-label="{{ __('translate.Open map') }}"
                        >
                            @if ($mapIsStatic)
                                <img
                                    src="{{ $mapThumbUrl }}"
                                    width="400"
                                    height="180"
                                    alt="{{ __('translate.Map preview') }}"
                                    loading="lazy"
                                >
                            @else
                                <iframe
                                    src="{{ $mapThumbUrl }}"
                                    title="{{ __('translate.Map preview') }}"
                                    loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade"
                                ></iframe>
                            @endif
                            <span class="listing-sidebar-location__map-hint">{{ __('translate.Open map') }}</span>
                        </button>
                    @elseif ($mapIsStatic)
                        <img
                            src="{{ $mapThumbUrl }}"
                            width="400"
                            height="180"
                            alt="{{ __('translate.Map preview') }}"
                            loading="lazy"
                        >
                    @else
                        <iframe
                            src="{{ $mapThumbUrl }}"
                            title="{{ __('translate.Map preview') }}"
                            loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"
                        ></iframe>
                    @endif
                </div>
            @endif
        </div>
    </div>

    @if ($canOpenMapModal)
        <div class="modal fade listing-location-map-modal" id="listingLocationMapModal" tabindex="-1"
            aria-labelledby="listingLocationMapModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h5 class="modal-title" id="listingLocationMapModalLabel">
                                {{ __('translate.Locality') }}
                            </h5>
                            @if (filled($locationLabel))
                                <p class="listing-location-map-modal__address mb-0">{{ $locationLabel }}</p>
                            @endif
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="{{ __('translate.Close') }}"></button>
                    </div>
                    <div class="modal-body p-0">
                        @if ($osmEmbedUrl)
                            <iframe
                                class="listing-location-map-modal__frame"
                                src="{{ $osmEmbedUrl }}"
                                title="{{ __('translate.Map preview') }}"
                                loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade"
                            ></iframe>
                        @else
                            <div class="listing-location-map-modal__fallback">
                                <p>{{ __('translate.Map location unavailable') }}</p>
                            </div>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <a href="{{ $osmViewUrl }}" class="thm-btn two" target="_blank" rel="noopener noreferrer">
                            {{ __('translate.View on OpenStreetMap') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endif