1<loader loading="loading"></loader>
2<div class="inventory-overview">
3  <div class="row column no-padding">
4    <h1>Hardware status</h1>
5    <div class="page-header">
6      <h2 class="inline">All hardware in the system</h2>
7      <a ng-href="data:text/json;charset=utf-8,{{originalData}}" class="inline btn-export float-right"  download="export_inventory.json" ng-show="hardwares.length">Export</a>
8
9    </div>
10  </div>
11  <section class="row column">
12    <!-- search -->
13    <p class="content-label" aria-label="hardware filter">Filter hardware components</p>
14    <div class="content__search">
15      <label for="content__search-input">Search</label> <input id="content__search-input" type="text"
16        ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
17      <div class="search-submit__wrapper">
18        <button class="clear-input" ng-click="clear()">&#10005;</button>
19        <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
20      </div>
21
22    </div>
23
24  </section>
25  <!-- end search -->
26  <section id="inventory-categories" class="row column">
27    <div class="row column header-row">
28      <div class="column large-12 header__actions-bar">
29        <div class="inline inventory__heading inventory__device-col">Hardware</div>
30        <div class="inline inventory__heading inventory__function-col">&nbsp;</div>
31        <div class="inline inventory__heading inventory__assoc-event"><!--Associated events--></div>
32      </div>
33    </div>
34    <div ng-repeat="inventory in hardwares|filter:filterBySearchTerms" class="inventory__group"  ng-class="{'active': inventory.expanded}" ng-click="inventory.expanded = ! inventory.expanded">
35      <p class="inline inventory__device-col">{{inventory.title}}</p>
36      <p class="inline inventory__function-col"></p>
37      <p class="inline inventory__assoc-event"><!--<a href="#/server-health/event-log">View 3 events</a>--></p>
38      <button class="accord-trigger float-right" ng-class="{'active': inventory.expanded}"></button>
39      <div class="row inventory__metadata" ng-class="{'active': inventory.expanded}" ng-click="$event.stopPropagation()">
40        <div class="column large-9 no-padding">
41          <div  ng-repeat="item in inventory.items" class="inline inventory__metadata-block">
42            <p class="content-label">{{item.key}}</p>
43            <p class="courier-bold">{{item.value}}</p>
44          </div>
45        </div>
46        <div class="column large-3 no-padding" ng-show="inventory.sub_components.length">
47          <div class="inventory__metadata-scroll show-scroll"> <!-- If content overflows; add 'show-scroll' class via JS to force visible scrollbar in webkit browsers-->
48            <div class="content-label">Subcomponents</div>
49            <div ng-repeat="sub_component in inventory.sub_components" class="inline inventory__metadata-block" ng-if="sub_component.Present">
50              <p class="courier-bold">{{sub_component.title}}<span class="icon icon__warning" ng-if="!sub_component.Functional"></span></p>
51            </div>
52          </div>
53        </div>
54      </div>
55    </div>
56  </section>
57</div>
58