<div class="p-4 space-y-4">
    <ContentPanel @title="Map" @open={{false}}>
        <LeafletMap class="w-full h-48 rounded-b-md shadow-md" @lat={{@warehouse.latitude}} @lng={{@warehouse.longitude}} @zoom={{17}} @zoomControl={{false}} as |layers|>
            <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
            <layers.marker
                @id={{@warehouse.id}}
                @icon={{icon iconUrl="/engines-dist/images/building-marker.png" iconSize=(array 16 16)}}
                @location={{point-to-coordinates @warehouse.location}}
                @riseOnHover={{true}}
                @title={{@warehouse.address}}
                @alt={{@warehouse.address}}
                as |marker|
            >
                <marker.popup>
                    <div>{{@warehouse.address}}</div>
                    <div>{{format-point @warehouse.location}}</div>
                </marker.popup>
                <marker.tooltip @permanent={{false}} @sticky={{true}} @direction="bottom">{{@warehouse.name}}</marker.tooltip>
            </layers.marker>
        </LeafletMap>
    </ContentPanel>
    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 text-xs dark:text-gray-100">
            <div class="field-info-container col-span-3">
                <div class="field-name">Name</div>
                <div class="field-value">{{n-a @warehouse.name}}</div>
            </div>

            <div class="field-info-container col-span-3">
                <div class="field-name">Street</div>
                <div class="field-value">{{n-a @warehouse.street1}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Neighborhood</div>
                <div class="field-value">{{n-a @warehouse.neighborhood}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Building</div>
                <div class="field-value">{{n-a @warehouse.building}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Security Access Code</div>
                <div class="field-value">{{n-a @warehouse.security_access_code}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">City</div>
                <div class="field-value">{{n-a @warehouse.city}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">State</div>
                <div class="field-value">{{n-a @warehouse.province}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Country</div>
                <div class="field-value">
                    <CountryName @country={{@warehouse.country}} @showFlag={{true}} />
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Phone</div>
                <div class="field-value">{{n-a @warehouse.phone}}</div>
            </div>

            <div class="field-info-container col-span-3">
                <div class="field-name">
                    Coordinates
                    {{!-- <a href="javascript:;" class="block ml-3" {{on "click" @warehouse.viewPlaceOnMap}}>
                                <FaIcon @icon="map" class="mr-1" />
                                View on map
                            </a> --}}
                </div>
                <div class="field-value">
                    {{point-coordinates @warehouse.location}}
                </div>
            </div>
        </div>
    </ContentPanel>
</div>