1<loader loading="loading"></loader>
2<div class="inventory__container">
3  <div class="row column">
4    <h1>Hardware status</h1>
5  </div>
6  <div class="row column">
7    <div class="page-header">
8      <h2 class="inline">All hardware in the system</h2>
9      <a ng-href="data:text/json;charset=utf-8,{{originalData}}" class="btn  btn-tertiary float-right"  download="export_inventory.json" ng-show="hardwares.length"><icon file="icon-export.svg"></icon>Export</a>
10    </div>
11  </div>
12  <div class="row column">
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>
16      <input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
17      <div class="search-submit__wrapper">
18        <button class="btn" type="button" aria-label="clear filter" ng-click="clear()">
19            <icon file="icon-close.svg" aria-hidden="true"></icon>
20        </button>
21        <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
22      </div>
23    </div>
24  </div>
25  <div class="row column inventory__table">
26    <h3 class="small-12 hardware__header">
27      Hardware
28    </h3>
29    <div class="small-12 harware__details" ng-repeat="inventory in hardwares|filter:filterBySearchTerms">
30      <div class="hardware__title row column" ng-class="{'expanded': inventory.expanded}" ng-click="inventory.expanded = ! inventory.expanded">
31        <h4>{{inventory.title}}</h4>
32        <button class="accord-trigger float-right" ng-class="{'active': inventory.expanded}" aria-expanded="{{inventory.expanded ? 'true' : 'false'}}" aria-expanded="{{inventory.expanded ? 'true' : 'false'}}" aria-label="{{inventory.expanded ? 'collapse' : 'expand'}}"></button>
33      </div>
34      <div class="hardware__items" ng-hide="!inventory.expanded" ng-class="{'expanded': inventory.expanded}">
35        <div class="row column">
36          <div class="items small-12 show-scroll" ng-class="{'large-9': inventory.sub_components.length}">
37            <div class="row column">
38              <div ng-repeat="item in inventory.items" class="small-4">
39                <h5 class="content-label">{{item.key}}</h5>
40                <p class="courier-bold">{{item.value}}</p>
41              </div>
42            </div>
43          </div>
44          <div class="subcomponents show-scroll small-12 large-3" ng-show="inventory.sub_components.length">
45            <div class="row column">
46              <h5 class="small-12 content-label">Subcomponents</h5>
47              <p ng-repeat="sub_component in inventory.sub_components" class="large-6 small-3 courier-bold" ng-if="sub_component.Present">
48                <span class="icon icon__warning" ng-if="!sub_component.Functional"></span>
49                {{sub_component.title}}
50              </p>
51            </div>
52          </div>
53        </div>
54      </div>
55    </div>
56  </div>
57</div>
58