<div class="fleetbase-dashboard-grid {{if @stickyHeader 'fleetbase-dashboard-grid--sticky'}}" ...attributes>
    <div class="left-section {{@leftHeaderWrapperClass}}">
        <h1 class="text-lg font-bold">{{this.dashboard.currentDashboard.name}}</h1>
    </div>
    <div class="fleetbase-dashboard-actions right-section {{@rightHeaderWrapperClass}} flex items-center space-x-2">
        {{yield}}
        {{yield to="actions"}}
        <DropdownButton
            @text={{if this.dashboard.currentDashboard.name this.dashboard.currentDashboard.name (t "component.dashboard.select-dashboard")}}
            @buttonClass="flex-row-reverse w-48 justify-between"
            @icon="caret-down"
            @iconClass="mr-0i"
            @size="xs"
            @iconPrefix="fas"
            @triggerClass="hidden md:flex"
            as |dd|
        >
            <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
                <div class="px-1">
                    {{#each this.dashboard.dashboards as |dashboard|}}
                        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.selectDashboard dashboard)}}>
                            <div class="flex-1 flex flex-row items-center">
                                <div class="w-6">
                                    <FaIcon @icon="desktop" />
                                </div>
                                <span>{{dashboard.name}}</span>
                            </div>
                            <div>
                                {{#if (eq this.dashboard.currentDashboard.id dashboard.id)}}
                                    <FaIcon @icon="check" class="text-green-500" />
                                {{/if}}
                            </div>
                        </a>
                    {{/each}}
                </div>
            </div>
        </DropdownButton>

        <div class="relative">
            <DropdownButton @icon="ellipsis-h" @size="xs" @iconPrefix="fas" @triggerClass="hidden md:flex" as |dd|>
                <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
                    <div class="px-1">
                        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.createDashboard)}}>
                            <div class="w-6">
                                <FaIcon @icon="add" />
                            </div>
                            <span>{{t "component.dashboard.create-new-dashboard"}}</span>
                        </a>

                        {{#if this.isSystemDashboard}}
                            <div class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400 italic border-t dark:border-gray-700 border-gray-200 mt-1">
                                {{t "component.dashboard.create-to-customize-hint"}}
                            </div>
                        {{else}}
                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.onChangeEdit true)}}>
                                <div class="w-6">
                                    <FaIcon @icon="edit" />
                                </div>
                                <span>{{t "component.dashboard.edit-layout"}}</span>
                            </a>
                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.onAddingWidget true)}}>
                                <div class="w-6">
                                    <FaIcon @icon="add" />
                                </div>
                                <span>{{t "component.dashboard.add-widgets"}}</span>
                            </a>

                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.deleteDashboard this.dashboard.currentDashboard)}}>
                                <div class="w-6">
                                    <FaIcon @icon="trash" />
                                </div>
                                <span>{{t "component.dashboard.delete-dashboard"}}</span>
                            </a>
                        {{/if}}

                    </div>
                </div>
            </DropdownButton>
        </div>
        {{#if this.dashboard.isEditingDashboard}}
            <div>
                <Button @type="magic" @icon="save" @size="xs" @helpText={{t "component.dashboard.save-dashboard"}} @onClick={{fn this.onChangeEdit false}} />
            </div>
        {{/if}}
    </div>
</div>

<div class="{{@createWrapperClass}}">
    {{yield to="body"}}
    <Dashboard::Create
        @isEdit={{and this.dashboard.isEditingDashboard (not this.isSystemDashboard)}}
        @isAddingWidget={{this.dashboard.isAddingWidget}}
        @isSystemDashboard={{this.isSystemDashboard}}
        @dashboard={{this.dashboard.currentDashboard}}
    />
    {{#if this.dashboard.isAddingWidget}}
        <EmberWormhole @to="application-root-wormhole">
            <Dashboard::WidgetPanel
                @isOpen={{this.dashboard.isAddingWidget}}
                @onLoad={{this.setWidgetSelectorPanelContext}}
                @dashboard={{this.dashboard.currentDashboard}}
                @defaultDashboardId={{@defaultDashboardId}}
                @widgetSourceDashboardId={{this.dashboard.currentWidgetSourceDashboardId}}
                @onClose={{fn this.onAddingWidget false}}
                class={{@widgetPanelClass}}
            />
        </EmberWormhole>
    {{/if}}
</div>
