
<div class="header flex--wrap" data-toggle="tooltip" title="{{widget.name}}">
    <h4 class="inline-block editable" ng-click="$event.stopPropagation(); widget.editTitle=true;" ng-show="!widget.editTitle&&widget.username===currentUser">{{widget.name}}</h4>

    <h4 class="inline-block" ng-hide="widget.username===currentUser">{{widget.name}} </h4>
    <input type="text" autofocus ng-click="$event.stopPropagation();" ui-keypress="{13:'widget.editTitle=false'}" ng-show="widget.editTitle && widget.username===currentUser" ng-model="widget.name" ng-focus="saveOldName(widget.name)" ng-blur="editName(widget);widget.editTitle=false">

    <div class="filter-wrapper flex">
        <label class="inline-block host-count-group" for="chart-group-{{widget.id}}">
            Group by
        </label>
        <select
                chozen
                ng-options="group for group in groups"
                id="chart-group-{{widget.id}}"
                ng-model="selectedGroup"
                ng-selected="group"
                search="false"
                watch="groups"
        >
        </select>
        <label class="inline-block data-picker-label" for="chart-date-{{widget.id}}">
            Date range
        </label>
        <input
                date-range-picker
                class="date-picker"
                id="chart-date-{{widget.id}}"
                type="text"
                ng-model="dateRange"
                options="dateOpts"
                min="weekDate"
                max="todayDate"
        >
    </div>
    <?php $this->load->view('/partials/widget_buttons'); ?>
</div>
<div>
    <div class="changes-container" ng-if="chartList">
        <div high-charts id="chart{{widget.id}}" config="chartList" <?= getWidgetStyles('body', 154, 458) ?>></div>
    </div>
    <div class="changes-container" ng-show="!chartList">
        <div class="dash-loading"><i class="icon icon-spinner icon-spin"></i></div>
    </div>
</div>

