<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
Copyright (c) 2014 Mozilla Corporation

Contributors:
Jeff Bryner jbryner@mozilla.com
Anthony Verez averez@mozilla.com
-->

<template name="alertssummary">
<div class="container">
    <div class="row col-xs-10">
        <div class="col-xs-1"><button class="btn btn-xs" data-toggle="collapse" data-target="#alertSearch">search</button></div>
        <div class="col-xs-9">
            <div id='alertSearch' class="collapse">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-xs-2" for="alertssearchtext">Summary</label>
                        <div class="col-xs-8">
                            <input type="search" name="searchSummary" class="form-control search-query" id="alertssearchtext" placeholder="summary field regex search">
                        </div>
                    </div>            
                    
                    <div class="form-group">
                        <label class="control-label col-xs-2" for="searchTime">Time Period</label>
                        <div class="col-xs-8">
                            <select id="searchTime" name="searchTime" class="form-control" title="Time Period">
                                <option value='tail'>Latest events</option>
                                <option value='1 hours'>Last Hour</option>
                                <option value='2 hours'>Last 2 Hours</option>
                                <option value='6 hours'>Last 6 hours</option>
                                <option value='1 days'>Last day</option>
                                <option value='2 days'>Last 2 days</option>
                                <option value='7 days'>Last 7 days</option>
                                <option value='30 days'>Last 30 days</option>
                                <option value='none'>None</option>
                            </select>
                        </div>
    
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-2" for="recordLimit">Record Limit</label>
                        <div class="col-xs-8">
                            <input type="text" name="recordLimit" class="form-control" id="recordLimit" placeholder="# records">
                        </div>
    
                    </div>                
                    <div class="form-group">
                        <div class="col-xs-8 col-xs-offset-2">
                            <button class="btn btn-xs alertssearch">search</button>
                        </div>
    
                    </div>
                    
                </form>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div id="charts" class="row col-xs-12">
            <div id="ringChart-category" class="col-xs-3 text-center"><h5 class="upperwhite" id="Categories">Categories: <span class="filter"></span></h5></div>
            <div id="volumeChart" class="col-xs-6 text-center"><h5 class="upperwhite">Volume <span class="filter"></span></h5></div>
            <div id="ringChart-severity" class="col-xs-3 text-center"><h5 class="upperwhite" id="Severity">Severity: <span class="filter"></span></h5></div>
    </div>
    <div class="row col-xs-10">
        <div class="col-xs-1"><button class="btn btn-xs reset">reset filters</button></div>
        <div class="col-xs-4 record-count">
            <span id="displayCount"></span>{{displayedAlerts}} displayed/total: <span id="totalAlerts">{{totalAlerts}}</span>
        </div>
        <div class="col-xs-5"><input type="search" class="form-control"  id="alertsfiltertext" placeholder="summary field regex filter"></div>
    </div>
    <div class="row col-xs-12">
        <div id="alerts-data-table" >
            <table class="alerts-data-table table table-reactive table-condensed">
                <thead><tr>
                <td class="upperwhite">Timestamp</td>
                <td class="upperwhite">Links</td>
                <td class="upperwhite">Severity</td>
                <td class="upperwhite">Category</td>
                <td class="upperwhite">Summary</td>
                <td></td>
                </tr>
                </thead>
                <tbody>
                    {{#each selectedalerts}}
                        {{>alertTableItem}}
                    {{/each}}
                </tbody>            
            </table>
        </div>
    </div>
    {{>whoismodal}}
    {{>dshieldmodal}}
    {{>cifmodal}}
    {{>blockIPModal}}
    {{>intelmodal}}
</div>
</template>

<template name="alertTableItem">
    <tr class="alert-row">
        <td>{{utctimestamp}}</td>
        <td><a href="/alert/{{esmetadata.id}}">mozdef</a><br>
            <a href="{{mozdef.kibanaURL}}/#dashboard/script.alert.js?id={{esmetadata.id}}" target="_blank">kibana</a>
            {{#if url}}
                <br><a href="{{url}}" target ="_blank">docs</a>
            {{/if}}
        </td>
        <td>{{severity}}</td>
        <td>{{category}}</td>
        <td>{{{ipDecorate summary}}}</td>
        <td>
            {{#if acknowledged}}
                <span class="tooltip-wrapper" title="Ack by: {{acknowledgedby}}" data-toggle="tooltip">
                    <button class="btn btn-xs btn-warning btnAlertAck" disabled data-target="{{_id}}">acked</button>
                </span>
            {{else}}
                <button class="btn btn-xs btn-warning btnAlertAck" data-target="{{_id}}">ack</button>
            {{/if}}            
        </td>
    </tr>
</template>