<loader loading="loading"></loader>
<div id="configuration-snmp">
  <div class="row column">
    <h1>SNMP settings</h1>
    <div class="small-12 snmp_description">
      Set the Simple Network Management Protocol (SNMP) with a host name or IP address and a port.
    </div>
    <div class="page-header">
      <h2>Managers</h2>
    </div>
  </div>
  <div class="row column">
    <div class="small-8">
      <div class="row column manager_group">
        <div class="small-5 snmp__address">
          <h3 id="host-name-ip-label">Host name or IP Address</h3>
        </div>
        <div class="small-5 snmp__port label">
          <h3 id="port-label">Port</h3>
        </div>
      </div>
      <div class="row column manager_group empty" ng-if="managers.length < 1">
        No managers have been added yet.
      </div>
      <form id="snmp__form" name="snmp__form" novalidate>
        <div class="row column manager_group" ng-form="manager_group" ng-repeat="manager in managers track by $index">
          <div class="small-11 snmp__fields">
            <div class="row column">
              <div class="small-10">
                <div class="row column">
                  <div id="snmp-manager{{$index+1}}-port-description" class="small-offset-6 small-6 help__text snmp__port">
                    Value must be between 0-65,535
                  </div>
                </div>
                <fieldset>
                  <div class="row column" ng-class="{'submitted':submitted}">
                    <div class="small-6 snmp__address">
                      <input id="snmp-manager{{$index+1}}-address"
                            name="snmp-manager{{$index+1}}-address"
                            type="text"
                            ng-change="manager.updateAddress=true"
                            ng-model="manager.address"
                            required
                            aria-labeledby="host-name-ip-label"/>
                      <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}">
                        <p ng-message="required" role="alert">Field is required</p>
                      </div>
                    </div>
                    <div class="small-6 snmp__port">
                      <input id="snmp-manager{{$index+1}}-port"
                            name="snmp-manager{{$index+1}}-port"
                            type="number"
                            min="0"
                            max="65535"
                            step="1"
                            ng-change="manager.updatePort=true"
                            ng-model="manager.port"
                            required
                            aria-labeledby="port-label"
                            aria-describedby="snmp-manager{{$index+1}}-port-description"/>
                      <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}">
                        <div ng-message-exp="['min', 'max', 'number', 'step']">
                          Invalid format
                        </div>
                        <p ng-message="required" role="alert">Field is required</p>
                      </div>
                    </div>
                  </div>
                </fieldset>
              </div>
              <div class="small-1 align-self-center snmp__buttons trash">
                <button
                  class="btn trash_button"
                  type="button"
                  ng-click="removeSNMPManager($index)"
                  aria-label="Remove">
                  <icon file="icon-trashcan.svg" aria-hidden="true"></icon>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="row column">
          <button class="btn  btn-tertiary  btn-add" type="button" ng-click="submitted=false; addNewSNMPManager();">
            <icon file="icon-plus.svg"></icon>Add manager</button>
        </div>
      </form>
    </div>
  </div>
  <div class="row column">
    <div class="snmp__submit-wrapper">
      <button type="button" ng-click="submitted=true;  snmp__form.$valid && setSNMP();" class="btn  btn-primary">Save settings</button>
      <button type="button" class="btn  btn-secondary" ng-click="refresh()">Cancel</button>
    </div>
  </div>
</div>