<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>
    <div class="relative widget-compliance" ng-if="chartList && totalScore !== undefined">
        <div high-charts id="chart{{widget.id}}" config="chartList" <?= getWidgetStyles('body', 214, 458) ?>></div>
        <div class="widget-compliance-table" ng-class="{'no-failures': totalScore == 100}">
            <table ng-if="totalScore != 100">
                <thead>
                <tr>
                    <th width="20"></th>
                    <th>Checks</th>
                    <th>Failing hosts</th>
                </tr></thead>
                <tbody>
                <tr ng-repeat="condition in (conditions | FilterByObject:{fail: 0}:false) | limitTo:5 track by $index">
                    <td>
                        <i ng-if="condition.severity == 'high'" class="bi bi-exclamation-triangle-fill"></i>
                        <i ng-if="condition.severity != 'high'" class="bi bi-exclamation-circle-fill">
                    </td>
                    <td title="{{ condition.name }}">{{ condition.name }}</td>
                    <td>{{ condition.fail >= 100000 ? '999,999+' : condition.fail }}</td>
                </tr>
                </tbody>
            </table>
            <div class="widget-compliance-all" ng-if="totalScore == 100">
                <i class="bi bi-check-circle-fill"></i><span>All hosts are compliant.</span>
            </div>
            <a href="/reports/compliance/run/{{ widget.payload.complianceReport }}">Open full report</a>
        </div>
    </div>

    <div class="changes-container" ng-show="!chartList || totalScore === undefined">
        <div class="dash-loading"><i class="icon icon-spinner icon-spin"></i></div>
    </div>
</div>
