<div class="live-map-component {{@wrapperClass}}">
    {{#if this.isReady}}
        <LeafletMap
            id={{this.mapId}}
            class={{@mapClass}}
            @lat={{this.latitude}}
            @lng={{this.longitude}}
            @zoom={{this.zoom}}
            @zoomControl={{@zoomControl}}
            @contextmenu={{true}}
            @contextmenuWidth={{140}}
            @contextmenuItems={{this.contextMenuItems}}
            @onLoad={{this.setupMap}}
            {{will-destroy this.closeChannels}}
            ...attributes
            as |layers|
        >
            <layers.tile @url={{this.tileSourceUrl}} />
            {{#if this.visibilityControls.drivers}}
                {{#each this.drivers as |driver|}}
                    <layers.drift-marker
                        @id={{driver.id}}
                        @rotationAngle={{driver.heading}}
                        @duration={{300}}
                        @icon={{icon iconUrl=(or driver.vehicle_avatar (config "defaultValues.vehicleAvatar")) iconSize=(array 24 24)}}
                        @location={{point-to-coordinates driver.location}}
                        @publicId={{driver.public_id}}
                        @onAdd={{fn this.triggerAction "onDriverAdded" driver}}
                        @onClick={{fn this.triggerAction "onDriverClicked" driver}}
                        as |marker|
                    >
                        <marker.popup @maxWidth="500" @minWidth="225">
                            <DriverCard @driver={{driver}} @showCoordinates={{true}} @textClass="text-gray-900 dark:text-gray-100" />
                        </marker.popup>
                        <marker.tooltip @permanent={{false}} @sticky={{true}}>{{driver.name}}</marker.tooltip>
                    </layers.drift-marker>
                {{/each}}
            {{/if}}

            {{#if this.visibilityControls.vehicles}}
                {{#each this.vehicles as |vehicle|}}
                    <layers.drift-marker
                        @id={{vehicle.id}}
                        @rotationAngle={{vehicle.heading}}
                        @duration={{300}}
                        @icon={{icon iconUrl=(or vehicle.avatar_url (config "defaultValues.vehicleAvatar")) iconSize=(array 24 24)}}
                        @location={{point-to-coordinates vehicle.location}}
                        @publicId={{vehicle.public_id}}
                        @onAdd={{fn this.triggerAction "onVehicleAdded" vehicle}}
                        @onClick={{fn this.triggerAction "onVehicleClicked" vehicle}}
                        as |marker|
                    >
                        <marker.tooltip @permanent={{false}} @sticky={{true}}>
                            <div>{{vehicle.displayName}}</div>
                            <div>{{if vehicle.online "Online" "Offline"}}</div>
                        </marker.tooltip>
                    </layers.drift-marker>
                {{/each}}
            {{/if}}

            {{#if this.visibilityControls.places}}
                {{#each this.places as |place|}}
                    <layers.marker
                        @id={{place.id}}
                        @icon={{icon iconUrl="/engines-dist/images/building-marker.png" iconSize=(array 16 16)}}
                        @location={{point-to-coordinates place.location}}
                        @riseOnHover={{true}}
                        @title={{place.address}}
                        @alt={{place.address}}
                        @onAdd={{fn this.triggerAction "onPlaceAdded" place}}
                        @onClick={{fn this.triggerAction "onPlaceClicked" place}}
                        as |marker|
                    >
                        <marker.popup>
                            <div>{{place.address}}</div>
                            <div>{{format-point place.location}}</div>
                        </marker.popup>
                        <marker.tooltip @permanent={{false}} @sticky={{true}} @direction="bottom">{{place.name}}</marker.tooltip>
                    </layers.marker>
                {{/each}}
            {{/if}}

            {{!-- {{#if this.isRoutesVisible}}
            {{#each this.routes as |route|}}
                <layers.polyline @locations={{route.details.coordinates}} />

                {{#if route.payload.pickup}}
                    <layers.marker @location={{point-to-coordinates route.payload.pickup.location}} as |marker|>
                        <marker.popup>
                            <div>{{route.payload.pickup.address}}</div>
                            <div>{{format-point route.payload.pickup.location}}</div>
                        </marker.popup>
                    </layers.marker>
                {{/if}}
                {{#each route.payload.waypoints as |waypoint|}}
                    <layers.marker @location={{point-to-coordinates waypoint.location}} as |marker|>
                        <marker.popup>
                            <div>{{waypoint.address}}</div>
                            <div>{{format-point waypoint.location}}</div>
                        </marker.popup>
                    </layers.marker>
                {{/each}}

                {{#if route.payload.dropoff}}
                    <layers.marker @location={{point-to-coordinates route.payload.dropoff.location}} as |marker|>
                        <marker.popup>
                            <div>{{route.payload.dropoff.address}}</div>
                            <div>{{format-point route.payload.dropoff.location}}</div>
                        </marker.popup>
                    </layers.marker>
                {{/if}}
            {{/each}}
        {{/if}} --}}

            <layers.draw-control
                @position="topright"
                @draw={{hash marker=false circlemarker=false circle=false polyline=false}}
                @onDrawDrawstop={{fn this.triggerAction "onDrawDrawstop"}}
                @onDrawDeleted={{fn this.triggerAction "onDrawDeleted"}}
                @onDrawEdited={{fn this.triggerAction "onDrawEdited"}}
                @onDrawDeletestart={{fn this.triggerAction "onDrawDeletestart"}}
                @onDrawEditstop={{fn this.triggerAction "onDrawEditstop"}}
                @onDrawControlCreated={{fn this.triggerAction "onDrawControlCreated"}}
                @onDrawFeatureGroupCreated={{fn this.triggerAction "onDrawFeatureGroupCreated"}}
            />

            {{#each this.activeServiceAreas as |serviceArea|}}
                <layers.polygon
                    @id={{serviceArea.id}}
                    @record={{serviceArea}}
                    @locations={{serviceArea.bounds}}
                    @fillColor={{serviceArea.color}}
                    @color={{serviceArea.stroke_color}}
                    @onAdd={{fn this.triggerAction "onServiceAreaLayerAdded" serviceArea}}
                    as |polygon|
                >
                    <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{serviceArea.name}} {{t "fleet-ops.component.live-map.service-area"}}</polygon.tooltip>
                </layers.polygon>

                {{#each serviceArea.zones as |zone|}}
                    <layers.polygon
                        @id={{zone.id}}
                        @record={{zone}}
                        @locations={{zone.locations}}
                        @fillColor={{zone.color}}
                        @color={{zone.stroke_color}}
                        @onAdd={{fn this.triggerAction "onZoneLayerAdd" zone}}
                        as |polygon|
                    >
                        <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{zone.name}} {{t "fleet-ops.component.live-map.zone"}}</polygon.tooltip>
                    </layers.polygon>
                {{/each}}
            {{/each}}

            {{yield layers}}
        </LeafletMap>
    {{else}}
        <div class="flex w-full h-full items-center justify-center">
            <Spinner />
        </div>
    {{/if}}
</div>

{{#if this.isDataLoaded}}
    <LiveMapDrawer
        @tab={{@drawerTab}}
        @onTabChanged={{@onDrawerTabChanged}}
        @onResizeEnd={{@onDrawerResizeEnd}}
        @onResizeStart={{@onDrawerResizeStart}}
        @isMinimized={{@isDrawerMinimized}}
        @isOpen={{@isDrawerOpen}}
        @vehicles={{this.vehicles}}
        @drivers={{this.drivers}}
        @places={{this.places}}
        @liveMap={{this}}
        @onDrawerReady={{this.setDrawerContext}}
    />
{{/if}}