<div class="header" 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">
    <?php $this->load->view('/partials/widget_buttons'); ?>
</div>
<div class="singleAlert {{severity}}">
    <div class="widget-overlay">
        <div>
            View details
        </div>
    </div>
    <div class="donut-container">
        <div ng-show="widget.severityStat && widgetsLoaded">
            <div ng-if="widgetsLoaded && widget.severityStat && chartConfig">
                <div style="height: 160px" high-charts id="singleAlert{{widget.id}}" config="chartConfig"></div>
                <span class="singleAlert-summary" ng-show="stats.failAlerts != 0 && widgetsLoaded">Alert triggered on <br /><span>{{ stats.failHosts }} / {{ stats.totalHosts }} hosts</span></span>
                <span class="singleAlert-summary" ng-show="stats.failAlerts == 0 && widgetsLoaded">
                    No alert triggered
                </span>
            </div>
        </div>

        <div ng-show="!widget.severityStat && !widgetsLoaded && !chartConfig">
            <div class="dash-loading"><i class="icon icon-spinner icon-spin"></i></div>
        </div>
    </div>
</div>
