<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>
    <!-- turn into directive -->
    <div ng-if="widget.severityStat" class="widget-overlay">

        <p>
            <i class="icon-circle severity high"></i>
            <span ng-show="widget.severityStat.high.totalAlerts">
                                        {{widget.severityStat.high.failAlerts}} alert<span ng-show="widget.severityStat.high.failAlerts!==1">s</span> triggered on {{widget.severityStat.high.failHosts}}/{{widget.severityStat.high.totalHosts}} hosts
                                    </span>
            <span class="muted" ng-show="!widget.severityStat.high.totalAlerts">No alerts set with this priority</span>
        </p>

        <p>
            <i class="icon-circle severity medium"></i>
            <span ng-show="widget.severityStat.medium.totalAlerts">
                                        {{widget.severityStat.medium.failAlerts}} alert<span ng-show="widget.severityStat.medium.failAlerts!==1">s</span> triggered on {{widget.severityStat.medium.failHosts}}/{{widget.severityStat.medium.totalHosts}} hosts
                                    </span>
            <span class="muted" ng-show="!widget.severityStat.medium.totalAlerts">No alerts set with this priority</span>
        </p>

        <p>
            <i class="icon-circle severity low"></i>
            <span ng-show="widget.severityStat.low.totalAlerts">
                                    {{widget.severityStat.low.failAlerts}} alert<span ng-show="widget.severityStat.low.failAlerts!==1">s</span> triggered on {{widget.severityStat.low.failHosts}}/{{widget.severityStat.low.totalHosts}} hosts
                                    </span>
            <span class="muted" ng-show="!widget.severityStat.low.totalAlerts">No alerts set with this priority</span>
        </p>
    </div>


    <div class="donut-container">
        <div ng-class="{'blur':getPriorityNumbers(widget.severityStat).alerts>0}">
            <div ng-hide="widgetsLoaded&&!widget.severityStat">
                <div class="donut-low donut-background">
                    <div class="clipper" ng-class="{'gt50':widget.severityStat.low.failHosts/widget.severityStat.low.totalHosts>0.5}"><!-- set class to gt50 (no clip) if % >50 -->
                        <div class="donut-inner low">
                        </div>
                        <div class="donut-fill low">
                        </div>
                    </div>
                </div>

                <div class="donut-medium donut-background">
                    <div class="clipper" ng-class="{'gt50':widget.severityStat.medium.failHosts/widget.severityStat.medium.totalHosts>0.5}"><!-- set class to gt50 (no clip) if % >50 -->
                        <div class="donut-inner medium">
                        </div>
                        <div class="donut-fill medium">
                        </div>
                    </div>
                </div>

                <div class="donut-high donut-background">
                    <div class="clipper" ng-class="{'gt50':widget.severityStat.high.failHosts/widget.severityStat.high.totalHosts>0.5}"><!-- set class to gt50 (no clip) if % >50 -->
                        <div class="donut-inner high">
                        </div>
                        <div class="donut-fill high">
                        </div>
                    </div>
                </div>

                <div class="donut-text">
                    <div ng-show="getPriorityNumbers(widget.severityStat).alerts">
                                                <span class="percentage">
                                                    {{getPriorityNumbers(widget.severityStat).alerts}}
                                                </span>
                        <span class="hosts">
                                                    {{getPriorityNumbers(widget.severityStat).hosts}} hosts
                                                </span>
                    </div>
                    <div class="no-fails" ng-show="widget.severityStat.high.failAlerts<1&&widget.severityStat.medium.failAlerts<1&&widget.severityStat.low.failAlerts<1">
                        <i class="bi bi-check-lg"></i>
                    </div>
                </div>
            </div>
            <div class="donut-text muted" ng-show="!widget.severityStat&&widgetsLoaded">
                No alerts are running in this widget
            </div>
        </div>

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