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

            <div class="field-info-container">
                <div class="field-name">{{t "zone.fields.description"}}</div>
                <div class="field-value uppercase">{{n-a @resource.type}}</div>
            </div>
        </div>
    </ContentPanel>

    <ContentPanel @title={{t "common.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.firstCoordinatePairLatitude}}
            @lng={{@resource.firstCoordinatePairLongitude}}
            @zoom={{12}}
            @zoomControl={{false}}
            as |layers|
        >
            <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
            <layers.polygon
                @id={{@resource.id}}
                @record={{@resource}}
                @locations={{unwrap-coordinates @resource.leafletCoordinates}}
                @fillColor={{@resource.color}}
                @color={{@resource.stroke_color}}
                as |polygon|
            >
                <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{@resource.name}} {{t "resource.zone"}}</polygon.tooltip>
            </layers.polygon>
        </LeafletMap>
    </ContentPanel>
</div>