<MapContainer::ToolbarContainer ...attributes>
    <div class="next-map-container-toolbar next-map-container-toolbar-zoom-control">
        <div id="map-toolbar-zoom-in-button-wrapper">
            <button type="button" id="map-toolbar-zoom-in-button" class="toolbar-button" {{on "click" (fn this.onAction "onZoomIn")}}>
                <FaIcon @icon="plus" @prefix="fas" class="text-gray-100" />
            </button>
        </div>
        <div id="map-toolbar-zoom-out-button-wrapper">
            <button type="button" class="toolbar-button" {{on "click" (fn this.onAction "onZoomOut")}}>
                <FaIcon @icon="minus" id="map-toolbar-zoom-out-button" @prefix="fas" class="text-gray-100" />
            </button>
        </div>
    </div>
    <div class="next-map-container-toolbar-panel next-map-container-toolbar-actions">
        <button type="button" id="map-toolbar-create-order-button" class="toolbar-button is-action" {{on "click" (fn this.onAction "onPressCreateOrder")}}>
            <FaIcon @icon="paper-plane" />
            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.create"}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
            </Attach::Tooltip>
        </button>
        <button type="button" id="map-toolbar-search-button" class="toolbar-button" {{on "click" (fn this.onAction "onPressSearch")}}>
            <FaIcon @icon="search" />
            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                <InputInfo @text={{t "fleet-ops.common.search"}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
            </Attach::Tooltip>
        </button>
        <button type="button" id="map-toolbar-view-orders-button" class="toolbar-button relative" {{on "click" (fn this.onAction "onPressViewOrders")}}>
            <div class="active-orders-count absolute top-0 right-0 -mr-2.5 -mt-1">
                <div class="relative flex w-5 h-5 rounded-full">
                    <div class="absolute inset-0 rounded-full w-5 h-5 text-xs bg-blue-500 opacity-75 {{if @activeOrdersCount 'animate-ping'}}"></div>
                    <div class="relative inline-flex items-center justify-center rounded-full w-5 h-5 text-xs bg-blue-500 text-white z-10">{{@activeOrdersCount}}</div>
                </div>
            </div>
            <FaIcon @icon="layer-group" />
            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.view-order"}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
            </Attach::Tooltip>
        </button>
        <BasicDropdown id="map-toolbar-service-areas-button" @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
            <dd.Trigger class="toolbar-button">
                <FaIcon @icon="map-marked-alt" />
                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                    <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.view-service-area"}} @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
                </Attach::Tooltip>
            </dd.Trigger>
            <dd.Content>
                <MapContainer::Toolbar::ZonesPanel @dd={{dd}} @liveMap={{@liveMap}} @map={{@map}} @onPressCreateServiceArea={{@onPressCreateServiceArea}} />
            </dd.Content>
        </BasicDropdown>
        <BasicDropdown id="map-toolbar-visibility-controls-button" @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
            <dd.Trigger class="toolbar-button">
                <FaIcon @icon="eye" />
                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                    <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.visibility"}} @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
                </Attach::Tooltip>
            </dd.Trigger>
            <dd.Content>
                <MapContainer::Toolbar::VisibilityControlPanel @dd={{dd}} @liveMap={{@liveMap}} @map={{@map}} />
            </dd.Content>
        </BasicDropdown>
        <button type="button" id="map-toolbar-live-map-drawer-button" class="toolbar-button is-action mb-0i" {{on "click" (fn this.onAction "onPressLiveMapDrawerToggle")}}>
            <FaIcon @icon="binoculars" />
            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                <InputInfo @text={{t "fleet-ops.component.map-container.toolbar.scope"}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
            </Attach::Tooltip>
        </button>
    </div>
</MapContainer::ToolbarContainer>