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