<div class="fleetbase-dashboard-grid flex items-center justify-between">
    <div class="left-section">
        <!-- Dashboard Title Text -->
        <h1 class="text-lg font-bold">{{this.currentDashboard.name}}</h1>
    </div>
    <div class="right-section ml-4 flex items-center">
        <!-- Select Dropdown -->
        <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
            <PowerSelect
                @options={{this.dashboards}}
                @selected={{this.currentDashboard}}
                @onChange={{fn (mut this.currentDashboard)}}
                @placeholder="Select Dashboard"
                @triggerClass="form-select form-input"
                as |dashboard|
            >
                {{smart-humanize dashboard.name}}
            </PowerSelect>
        </div>
        <!-- Button -->

        <div class="ml-4 relative">

            <Button @type="magic" @icon="edit" @helpText={{"Edit Dashboard"}} @onClick={{this.onChangeEdit}} />
            <Button @type="magic" @icon="add" @helpText={{"Add new widgets to Dashboard"}} @onClick={{this.openWidgetSelector}} />
        </div>
    </div>
</div>

<Dashboard::Create @isEdit={{this.isEditDashboard}} @dashboard={{this.currentDashboard}} />
{{#if this.isSelectingWidgets}}
    <Dashboard::WidgetPanel @isOpen={{this.isSelectingWidgets}} @onLoad={{this.setWidgetSelectorPanelContext}} @dashboard={{this.currentDashboard}} @onClose={{this.closeWidgetSelector}} />
{{/if}}