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>–</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