<div class="widget-header">
    <vdr-dropdown>
        <button class="btn btn-secondary btn-sm" vdrDropdownTrigger>
            <clr-icon shape="plus"></clr-icon>
            {{ 'dashboard.add-widget' | translate }}
        </button>
        <vdr-dropdown-menu vdrPosition="bottom-right">
            <button
                class="button"
                vdrDropdownItem
                *ngFor="let id of availableWidgetIds$ | async"
                (click)="addWidget(id)"
            >
                {{ id }}
            </button>
        </vdr-dropdown-menu>
    </vdr-dropdown>
</div>
<div cdkDropListGroup>
    <div
        class="clr-row dashboard-row"
        *ngFor="let row of widgetLayout; index as rowIndex; trackBy: trackRow"
        cdkDropList
        (cdkDropListDropped)="drop($event)"
        cdkDropListOrientation="horizontal"
        [cdkDropListData]="{ index: rowIndex }"
    >
        <div
            *ngFor="let widget of row; trackBy: trackRowItem"
            class="dashboard-item"
            [ngClass]="getClassForWidth(widget.width)"
            cdkDrag
            [cdkDragData]="widget"
        >
            <vdr-dashboard-widget
                *vdrIfPermissions="widget.config.requiresPermissions || null"
                [widgetConfig]="widget.config"
            >
                <div class="flex">
                    <div class="drag-handle" cdkDragHandle>
                        <clr-icon shape="drag-handle" size="24"></clr-icon>
                    </div>
                    <vdr-dropdown>
                        <button class="icon-button" vdrDropdownTrigger>
                            <clr-icon shape="ellipsis-vertical"></clr-icon>
                        </button>
                        <vdr-dropdown-menu vdrPosition="bottom-right">
                            <h4 class="dropdown-header">{{ 'dashboard.widget-resize' | translate }}</h4>
                            <button
                                class="button"
                                vdrDropdownItem
                                [disabled]="width === widget.width"
                                *ngFor="let width of getSupportedWidths(widget.config)"
                                (click)="setWidgetWidth(widget, width)"
                            >
                                {{ 'dashboard.widget-width' | translate: { width: width } }}
                            </button>
                            <div class="dropdown-divider" role="separator"></div>
                            <button class="button" vdrDropdownItem (click)="removeWidget(widget)">
                                <clr-icon shape="trash" class="is-danger"></clr-icon>
                                {{ 'dashboard.remove-widget' | translate }}
                            </button>
                        </vdr-dropdown-menu>
                    </vdr-dropdown>
                </div>
            </vdr-dashboard-widget>
        </div>
    </div>
</div>
