<div class="details-wrapper" ...attributes>
    <ContentPanel @title={{t "place.fields.details"}} @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
            <div class="field-info-container">
                <div class="field-name">{{t "common.name"}}</div>
                <div class="field-value uppercase">{{n-a @resource.name}}</div>
            </div>

            <div class="field-info-container col-span-2">
                <div class="field-name">{{t "place.fields.street-1"}}</div>
                <div class="field-value uppercase">{{n-a @resource.street1}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "place.fields.street-2"}}</div>
                <div class="field-value uppercase">{{n-a @resource.street2}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "place.fields.neighborhood"}}</div>
                <div class="field-value uppercase">{{n-a @resource.neighborhood}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "place.fields.building"}}</div>
                <div class="field-value uppercase">{{n-a @resource.building}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "place.fields.security-access-code"}}</div>
                <div class="field-value uppercase">{{n-a @resource.security_access_code}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "place.fields.city"}}</div>
                <div class="field-value uppercase">{{n-a @resource.city}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "place.fields.state"}}</div>
                <div class="field-value uppercase">{{n-a @resource.province}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "place.fields.country"}}</div>
                <div class="field-value uppercase">
                    <CountryName @country={{@resource.country}} @showFlag={{true}} />
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "place.fields.phone"}}</div>
                <div class="field-value uppercase">{{n-a @resource.phone}}</div>
            </div>

            <div class="field-info-container col-span-3">
                <div class="field-name">
                    {{t "place.fields.coordinates"}}
                </div>
                <div class="field-value">
                    {{point-coordinates @resource.location}}
                </div>
            </div>
        </div>
    </ContentPanel>

    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />

    <ContentPanel @title="Map" @open={{true}} @wrapperClass="bordered-top">
        <LeafletMap
            class="w-full h-48 rounded-md shadow-md border border-gray-200 dark:border-gray-700"
            @lat={{@resource.latitude}}
            @lng={{@resource.longitude}}
            @zoom={{17}}
            @zoomControl={{false}}
            as |layers|
        >
            <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
            <layers.marker
                @id={{@resource.id}}
                @icon={{icon iconUrl=(or @resource.avatar_url "/engines-dist/images/building-marker.png") iconSize=(array 40 40)}}
                @location={{point-to-coordinates @resource.location}}
                @riseOnHover={{true}}
                @title={{@resource.address}}
                @alt={{@resource.address}}
                as |marker|
            >
                <marker.popup>
                    <div>{{@resource.address}}</div>
                    <div>{{format-point @resource.location}}</div>
                </marker.popup>
                <marker.tooltip @permanent={{false}} @sticky={{true}} @direction="bottom">{{@resource.name}}</marker.tooltip>
            </layers.marker>
        </LeafletMap>
    </ContentPanel>

    <ContentPanel @title={{t "avatar-picker.avatar"}} @open={{true}} @wrapperClass="bordered-top">
        <div class="flex px-1">
            <div class="border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-600 rounded-lg flex items-center justify-center">
                <div class="flex items-center justify-center h-20 w-24">
                    <Image alt={{@resource.displayName}} src={{or @resource.avatar_custom_url @resource.avatar_url}} @fallbackSrc={{config "defaultValues.placeAvatar"}} class="w-12 h-12" />
                </div>
            </div>
        </div>
    </ContentPanel>
</div>