[%
    USE Whostmgr;
%]

<div class="row">
    <div class="col-xs-6">
        <h2>[% locale.maketext('Hits List') %]</h2>
    </div>
    <div class="col-xs-6 text-right" ng-show="isInstalled">
        <div class="navigation-controls">
            <button id="btnTopCustomRulesList"
                    type="button"
                    class="btn btn-primary"
                    ng-click="loadView('rulesList', null, { clearAlerts: true })">
                [% locale.maketext('Rules List') %]
            </button>
        </div>
    </div>
</div>

<div class="row" ng-show="dbException">
    <div class="col-xs-12">
        <cp:alert id="databaseError"
                  type="danger">
            [% locale.maketext('The following exception has occurred: [_1]', '{{dbException}}') %]
        </cp:alert>
    </div>
</div>

<div class="row" ng-show="!dbException">
    <div class="col-xs-12 col-sm-5">
        <div class="form-group">
            <div class="row">
                <div class="col-xs-10">
                    <div class="input-group filter-controls">
                        <input  id="hitListFilter"
                                class="form-control"
                                placeholder="[% locale.maketext('Search') %]"
                                title="[% locale.maketext('To find rules quickly use the Search feature.') %]"
                                ng-model="meta.filterValue"
                                autocomplete="off"
                            auto-focus
                            ng-keyup="triggerToggleSearch($event)">
                        <span class="input-group-btn">
                            <button id="btnSearch"
                                    type="button"
                                    class="btn btn-default"
                                    ng-click="toggleSearch(true)">
                                <span class="glyphicon" ng-class="{ 'glyphicon-search': !activeSearch, 'glyphicon-remove': activeSearch }"></span>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="col-xs-2">
                    <span spinner id="hitlistSpinner" class="headerSpinner" title="[% locale.maketext('Loading …') %]"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-7 form-inline text-left-xs text-right-sm">
        <div class="form-group page-size-container">
            <label for="ddlPageSize">[% locale.maketext('Page Size') %]
                <select id="ddlPageSize"
                        class="form-control page-size-control"
                        ng-model="meta.pageSize"
                        ng-options="size for size in meta.pageSizes">
                </select>
            </label>
        </div>
        <uib-pagination id="topPager"
                    ng-change="selectPage()"
                    ng-model="meta.pageNumber"
                    items-per-page="meta.pageSize"
                    total-items="totalItems"
                    max-size="5"
                    direction-links="false"
                    boundary-links="true"
                    first-text="[% locale.maketext('First') %]"
                    last-text="[% locale.maketext('Last') %]"
                    previous-text="[% locale.maketext('Previous') %]"
                    next-text="[% locale.maketext('Next') %]"
                    class="pagination-small">
        </uib-pagination>
    </div>
</div>

<table class="table table-striped table-condensed" ng-show="!dbException">
    <thead>
        <tr cp-responsive-sort>
            <th class="visible-xs" colspan="6">
                <cp-responsive-sort-insert id-suffix="hits" main-label="[% locale.maketext('Sort by') %]"></cp-responsive-sort-insert>
            </th>
            <th class="hidden-xs col-xs-2 hit-date">
                <toggle-sort id="sortDate"
                             onsort="sortList"
                             sort-meta="meta"
                             sort-field="timestamp">
                    [% locale.maketext('Date') %]
                </toggle-sort>
            </th>
            <th class="hidden-xs col-xs-2 hit-host">
                <toggle-sort id="sortHost"
                             onsort="sortList"
                             sort-meta="meta"
                             sort-field="host">
                    [% locale.maketext('Host') %]
                </toggle-sort>
            </th>
            <th class="hidden-xs col-xs-2 hit-ip">
                <toggle-sort id="sortIP"
                             onsort="sortList"
                             sort-meta="meta"
                             sort-field="ip">
                    [% locale.maketext('Source') %]
                </toggle-sort>
            </th>
            <th class="hidden-xs col-xs-1 hit-severity">
                <toggle-sort id="sortSeverity"
                             onsort="sortList"
                             sort-meta="meta"
                             sort-field="meta_severity">
                    [% locale.maketext('Severity') %]
                </toggle-sort>
            </th>
            <th class="hidden-xs col-xs-1 hit-response">
                <toggle-sort id="sortResponse"
                             onsort="sortList"
                             sort-meta="meta"
                             sort-field="http_status">
                    [% locale.maketext('Status') %]
                </toggle-sort>
            </th>
            <th class="hidden-xs col-xs-4 hit-rule-id">
                <toggle-sort id="sortRule"
                             onsort="sortList"
                             sort-meta="meta"
                             sort-field="meta_id">
                    [% locale.maketext('Rule ID') %]
                </toggle-sort>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat-start="hit in hitList" ng-class="{active: $index === selectedRow}">
            <td class="hit-date" id="dateData{{$index}}">{{hit.timestamp}}</td>
            <td class="hit-host" id="hostData{{$index}}" ng-bind-html="hit.host | wrap:'[.:]'"></td>
            <td class="hit-ip" id="ipData{{$index}}" ng-bind-html="hit.ip | wrap:'[.:]'"></td>
            <td class="hit-severity" id="severityData{{$index}}">{{hit.meta_severity}}</td>
            <td class="hit-response" id="responseData{{$index}}">{{hit.http_status}}</td>
            <td class="hit-rule-id" id="ruleId{{$index}}">
                <div class="row row-condensed">
                    <div class="col-xs-12 col-md-8" ng-show="hit.meta_file && hit.file_exists">
                        <button id="btnRule{{$index}}"
                                type="button"
                                class="btn-sm btn-link text-left"
                                ng-click="loadEditRuleView(hit.meta_id, hit.meta_file)">
                            <span class="glyphicon glyphicon-pencil"></span>
                            <span id="metaID{{$index}}">{{hit.meta_id}}</span>: <span id="metaMsg{{$index}}" ng-bind-html="hit.meta_msg | wrap: '[.]':20"></span>
                        </button>
                    </div>
                    <div class="col-xs-12 col-md-8" ng-hide="hit.meta_file && hit.file_exists">
                        <button id="btnRule{{$index}}"
                                type="button"
                                class="btn-sm btn-link text-left"
                                disabled="disabled">
                            <span class="glyphicon glyphicon-ban-circle"></span>
                            <span id="metaID{{$index}}">{{hit.meta_id}}</span>: <span id="metaMsg{{$index}}" ng-bind-html="hit.meta_msg | wrap: '[.]':20"></span>
                        </button>
                    </div>
                    <div class="col-xs-12 col-md-4">
                        <button id="btnExpandCollapse{{$index}}"
                                type="button"
                                class="btn-sm btn-link"
                                ng-click="toggleRow($index)">
                            <span ng-show="$index === selectedRow"><span class="glyphicon glyphicon-chevron-up"></span> [% locale.maketext('Hide') %]</span>
                            <span ng-show="$index !== selectedRow"><span class="glyphicon glyphicon-chevron-down"></span> [% locale.maketext('More') %]</span>
                        </button>
                    </div>
                </div>
            </td>
        </tr>
        <tr ng-repeat-end class="info" ng-if="$index === selectedRow">
            <td colspan="6" class="hit-request" id="requestData{{$index}}">
                <div class="hit-request-table">
                    <div>
                        <div>
                            <label>[% locale.maketext('Request:') %]</label>
                        </div>
                        <div>
                            <span>
                                <span>{{ hit.http_method }}</span>
                                <span ng-bind-html="hit.path | wrap:'[/.?=]':20"></span>
                            </span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <label>[% locale.maketext('Action Description:') %]</label>
                        </div>
                        <div>
                            <span ng-bind-html="hit.action_desc | wrap:'[/.?=]':20"></span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <label>[% locale.maketext('Justification:') %]</label>
                        </div>
                        <div>
                            <span ng-bind-html="hit.justification | wrap:'[/.?=]':20"></span>
                        </div>
                    </div>
                </div>
                <button ng-show="hit.reportable"
                        ng-attr-id="btnReport-{{ $index }}"
                        class="btn btn-sm btn-default"
                        title="[% locale.maketext('Report a problem or concern with this hit.') %]"
                        ng-click="loadReportView(hit)">
                    <span class='fas fa-envelope'></span> [% locale.maketext('Report this hit') %]
                </button>
            </td>
        </tr>
        <tr class="info emptyrow" ng-hide="hitList.length" ng-switch="loadingPageData">
            <td colspan="6" id="noRecords" ng-switch-when="true">[% locale.maketext('The system is loading your [asis,Hits List].') %]</td>
            <td colspan="6" id="noRecords" ng-switch-default>[% locale.maketext('The [asis,Hits List] is empty.') %]</td>
        </tr>
    </tbody>
</table>

<div class="row" ng-show="!dbException">
    <div class="col-xs-12 col-sm-7 text-left-xs text-right-sm form-inline pull-right">
        <div class="form-group page-size-container">
            <label for="ddlBottomPageSize">[% locale.maketext('Page Size') %]
                <select id="ddlBottomPageSize"
                        class="form-control page-size-control"
                        ng-model="meta.pageSize"
                        ng-options="size for size in meta.pageSizes">
                </select>
            </label>
        </div>
        <uib-pagination id="bottomPager"
                    ng-change="selectPage()"
                    ng-model="meta.pageNumber"
                    items-per-page="meta.pageSize"
                    total-items="totalItems"
                    max-size="5"
                    direction-links="false"
                    boundary-links="true"
                    first-text="[% locale.maketext('First') %]"
                    last-text="[% locale.maketext('Last') %]"
                    previous-text="[% locale.maketext('Previous') %]"
                    next-text="[% locale.maketext('Next') %]"
                    class="pagination-small">
        </uib-pagination>
    </div>
    <div class="col-xs-12 col-sm-5 pull-left">
        <div class="form-group">
            <div class="row">
                <div class="col-xs-12">
                    <div class="navigation-controls">
                        <button id="btnTop"
                                type="button"
                                class="btn btn-link"
                                ng-click="scrollTo('top')">
                            <span class="glyphicon glyphicon-chevron-up"></span>
                            [% locale.maketext('Back To Top') %]
                        </button>
                        <button id="btnBottomCustomRulesList"
                                type="button"
                                class="btn btn-primary"
                                ng-click="loadView('rulesList')" ng-show="isInstalled">
                            [% locale.maketext('Rules List') %]
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>