1<section id="event-filter" class="row column" aria-label="event log filtering">
2    <div class="inline event__severity-filter">
3        <p class="filter-label">Filter by severity</p>
4        <button class="inline first" ng-click="toggleSeverityAll()"
5                ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All
6        </button>
7        <button class="inline " ng-click="toggleSeverity('high')"
8                ng-class="selectedSeverity.high ? 'btn-primary' : 'btn-secondary'">High
9        </button>
10        <button class="inline" ng-click="toggleSeverity('medium')"
11                ng-class="selectedSeverity.medium ? 'btn-primary' : 'btn-secondary'">Medium
12        </button>
13        <button class="inline last" ng-click="toggleSeverity('low')"
14                ng-class="selectedSeverity.low ? 'btn-primary' : 'btn-secondary'">Low
15        </button>
16    </div>
17    <div class="inline event__date-filter">
18        <p class="filter-label">Filter by date range</p>
19        <div class="inline">
20            <label for="event-filter-start-date">Start Date</label>
21            <input id="event-filter-start-date" type="date" max="{{end_date | date:'yyyy-MM-dd'}}" placeholder="MM/DD/YYYY" ng-model="start_date"/>
22        </div>
23        <strong>&ndash;</strong>
24        <div class="inline">
25            <label for="event-filter-end-date">End Date</label>
26            <input id="event-filter-end-date" type="date" min="{{start_date | date:'yyyy-MM-dd'}}" placeholder="MM/DD/YYYY" ng-model="end_date"/>
27        </div>
28    </div>
29    <div class="inline event__status-filter">
30        <p class="filter-label">Filter by event status</p>
31        <!-- Status filter -->
32        <div class="dropdown__wrapper">
33            <button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;"
34                    ng-class="{'active' : statusFilter}" toggle-flag="statusFilter">
35                    <span ng-if="selectedStatus.all">All events</span>
36                    <span ng-if="!selectedStatus.all && selectedStatus.resolved">Resolved events</span>
37                    <span ng-if="!selectedStatus.all && !selectedStatus.resolved">Unresolved events</span>
38            </button>
39            <ul class="dropdown__list inline" ng-show="statusFilter">
40                <li>
41                    <button
42                        ng-click="selectedStatus.all = true; statusFilter = false;"
43                        ng-class="{'active' : selectedStatus.all}">All events</button>
44                </li>
45                <li>
46                    <button
47                        ng-click="selectedStatus.all = false; selectedStatus.resolved = true; statusFilter = false;"
48                        ng-class="{'active' : selectedStatus.resolved}">Resolved events</button>
49                </li>
50                <li>
51                    <button
52                        ng-click="selectedStatus.all = false; selectedStatus.resolved = false; statusFilter = false;"
53                        ng-class="{'active' : !selectedStatus.resolved}">Unresolved events</button>
54                </li>
55            </ul>
56        </div>
57    </div>
58</section>
59