<MapContainer::ToolbarContainer {{did-update this.handleArgsChanged @map}} ...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-toggle-light-mode-button" class="toolbar-button is-action mb-0i" {{on "click" this.toggleMapTheme}}>
            <FaIcon @icon="lightbulb" />
            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                <InputInfo @text="Toggle {{if (eq this.liveMap.mapTheme 'dark') 'light' 'dark'}} mode" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
            </Attach::Tooltip>
        </button>
    </div>
    <div class="next-map-container-toolbar-panel next-map-container-toolbar-actions">
        {{#let (cannot "fleet-ops create order") as |unauthorized|}}
            <button
                type="button"
                id="map-toolbar-create-order-button"
                class="toolbar-button is-action {{if unauthorized 'unauthorized'}}"
                {{on "click" (fn this.onAction "onPressCreateOrder")}}
                disabled={{unauthorized}}
            >
                <FaIcon @icon="paper-plane" />
                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                    {{#let (if unauthorized (concat (t "common.unauthorized-to") " " (t "fleet-ops.common.create-order")) (t "fleet-ops.common.create-order")) as |unauthorizedMessage|}}
                        <InputInfo @text={{unauthorizedMessage}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
                    {{/let}}
                </Attach::Tooltip>
            </button>
        {{/let}}
        {{#let (cannot "fleet-ops list order") as |unauthorized|}}
            <button
                type="button"
                id="map-toolbar-search-button"
                class="toolbar-button {{if unauthorized 'unauthorized'}}"
                {{on "click" (fn this.onAction "onPressSearch")}}
                disabled={{unauthorized}}
            >
                <FaIcon @icon="search" />
                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                    {{#let (if unauthorized (concat (t "common.unauthorized-to") " " (t "fleet-ops.common.search")) (t "fleet-ops.common.search")) as |unauthorizedMessage|}}
                        <InputInfo @text={{unauthorizedMessage}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
                    {{/let}}
                </Attach::Tooltip>
            </button>
        {{/let}}
        {{#let (cannot "fleet-ops list order") as |unauthorized|}}
            <button
                type="button"
                id="map-toolbar-view-orders-button"
                class="toolbar-button relative {{if unauthorized 'unauthorized'}}"
                {{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">
                    {{#let
                        (if
                            unauthorized
                            (concat (t "common.unauthorized-to") " " (t "fleet-ops.component.map-container.toolbar.view-order"))
                            (t "fleet-ops.component.map-container.toolbar.view-order")
                        )
                        as |unauthorizedMessage|
                    }}
                        <InputInfo @text={{unauthorizedMessage}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
                    {{/let}}
                </Attach::Tooltip>
            </button>
        {{/let}}
        {{#let (cannot "fleet-ops list service-area") as |unauthorized|}}
            <BasicDropdown id="map-toolbar-service-areas-button" @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
                <dd.Trigger class="toolbar-button {{if unauthorized 'unauthorized'}}">
                    <FaIcon @icon="map-marked-alt" />
                    <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                        {{#let
                            (if
                                unauthorized
                                (concat (t "common.unauthorized-to") " " (t "fleet-ops.component.map-container.toolbar.view-service-area"))
                                (t "fleet-ops.component.map-container.toolbar.view-service-area")
                            )
                            as |unauthorizedMessage|
                        }}
                            <InputInfo @text={{unauthorizedMessage}} @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
                        {{/let}}
                    </Attach::Tooltip>
                </dd.Trigger>
                <dd.Content>
                    <MapContainer::Toolbar::ZonesPanel @dd={{dd}} @liveMap={{@liveMap}} @map={{@map}} @onPressCreateServiceArea={{@onPressCreateServiceArea}} />
                </dd.Content>
            </BasicDropdown>
        {{/let}}
        <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>