<loader loading="loading"></loader>
<div id="configuration-snmp">
  <div class="row column">
    <h1>SNMP settings</h1>
  </div>
  <form class="snmp__form" role="form" action="">
      <div class="page-header">
        <h2 class="bold h4">Set the Simple Network Management Protocol (SNMP)</h2>
      </div>
      <fieldset>
        <div class="row column snmp__managers-wrap">
          <div class="snmp__managers" ng-repeat="manager in managers track by $index">
            <div class="snmp__manager-field">
              <label>SNMP Manager Server</label>
              <input class="inline" id="snmp-manager{{$index+1}}-address" ng-change="manager.update_address = true" type="text" ng-model="manager.address" ng-blur="managers[$index].address = manager.address"/>
            </div>
            <div class="snmp__manager-field">
              <label>Port</label>
              <input class="inline" id="snmp-manager{{$index+1}}-port" type="text" ng-change="manager.update_port = true" ng-model="manager.port" ng-blur="managers[$index].port = manager.port"/>
            </div>
          <button class="snmp__manager-remove" ng-click="removeSNMPManager($index)">Remove</button>
          </div>
          <button type="button" class="btn-primary inline" ng-click="addNewSNMPManager()">Add SNMP manager</button>
        </div>
      </fieldset>
    <div class="snmp__submit-wrapper">
      <button type="button" class="btn-primary inline" ng-click="setSNMP()">Save settings</button>
      <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
    </div>
    <p class="success-msg" ng-show="success" role="alert">Success! SNMP managers updated!</p>
    <p class="error error-msg" ng-show="error" role="alert">Error setting SNMP Managers!</p>
  </form>
</div>