1<loader loading="loading"></loader>
2<div id="configuration-snmp">
3  <div class="row column">
4    <h1>SNMP settings</h1>
5    <div class="small-12 snmp_description">
6      Set the Simple Network Management Protocol (SNMP) with a host name or IP address and a port.
7    </div>
8    <div class="page-header">
9      <h2>Managers</h2>
10    </div>
11  </div>
12  <div class="row column">
13    <div class="small-8">
14      <div class="row column manager_group">
15        <div class="small-5 snmp__address">
16          <h3 id="host-name-ip-label">Host name or IP Address</h3>
17        </div>
18        <div class="small-5 snmp__port label">
19          <h3 id="port-label">Port</h3>
20        </div>
21      </div>
22      <div class="row column manager_group empty" ng-if="managers.length < 1">
23        No managers have been added yet.
24      </div>
25      <form id="snmp__form" name="snmp__form" novalidate>
26        <div class="row column manager_group" ng-form="manager_group" ng-repeat="manager in managers track by $index">
27          <div class="small-11 snmp__fields">
28            <div class="row column">
29              <div class="small-10">
30                <div class="row column">
31                  <div id="snmp-manager{{$index+1}}-port-description" class="small-offset-6 small-6 help__text snmp__port">
32                    Value must be between 0-65,535
33                  </div>
34                </div>
35                <fieldset>
36                  <div class="row column" ng-class="{'submitted':submitted}">
37                    <div class="small-6 snmp__address">
38                      <input id="snmp-manager{{$index+1}}-address"
39                            name="snmp-manager{{$index+1}}-address"
40                            type="text"
41                            ng-change="manager.updateAddress=true"
42                            ng-model="manager.address"
43                            required
44                            aria-labeledby="host-name-ip-label"/>
45                      <div ng-messages="manager_group['snmp-manager'+($index+1)+'-address'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-address'].$touched || submitted}">
46                        <p ng-message="required" role="alert">Field is required</p>
47                      </div>
48                    </div>
49                    <div class="small-6 snmp__port">
50                      <input id="snmp-manager{{$index+1}}-port"
51                            name="snmp-manager{{$index+1}}-port"
52                            type="number"
53                            min="0"
54                            max="65535"
55                            step="1"
56                            ng-change="manager.updatePort=true"
57                            ng-model="manager.port"
58                            required
59                            aria-labeledby="port-label"
60                            aria-describedby="snmp-manager{{$index+1}}-port-description"/>
61                      <div ng-messages="manager_group['snmp-manager'+($index+1)+'-port'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-port'].$touched || submitted}">
62                        <div ng-message-exp="['min', 'max', 'number', 'step']">
63                          Invalid format
64                        </div>
65                        <p ng-message="required" role="alert">Field is required</p>
66                      </div>
67                    </div>
68                  </div>
69                </fieldset>
70              </div>
71              <div class="small-1 align-self-center snmp__buttons trash">
72                <button
73                  class="btn trash_button"
74                  type="button"
75                  ng-click="removeSNMPManager($index)"
76                  aria-label="Remove">
77                  <icon file="icon-trashcan.svg" aria-hidden="true"></icon>
78                </button>
79              </div>
80            </div>
81          </div>
82        </div>
83        <div class="row column">
84          <button class="btn  btn-tertiary  btn-add" type="button" ng-click="submitted=false; addNewSNMPManager();">
85            <icon file="icon-plus.svg"></icon>Add manager</button>
86        </div>
87      </form>
88    </div>
89  </div>
90  <div class="row column">
91    <div class="snmp__submit-wrapper">
92      <button type="button" ng-click="submitted=true;  snmp__form.$valid && setSNMP();" class="btn  btn-primary">Save settings</button>
93      <button type="button" class="btn  btn-secondary" ng-click="refresh()">Cancel</button>
94    </div>
95  </div>
96</div>