<div ng-if="device.addType === 'discovery'">
  <h4 class="bg-primary">Network Discovery</h4>
  <p>Listed below are the devices found on your network. Select the correct one and then click Finish.</p>

  <p><button class="btn btn-success" type="button" ng-click="getTwowayDevices(device.type.name)"><i class="fa fa-refresh"></i>&nbsp;&nbsp;Refresh the list</button></p>

  <form name="deviceAddForm" role="form" ng-submit="doNext()" novalidate>

    <div class="alert alert-warning margin-top-md" role="alert" ng-if="!twowayDevices.length">
      <i class="fa fa-warning"></i>&nbsp;&nbsp;<strong>No Devices Found</strong>
      <p>There were no available devices found on your network.</p>
    </div>

    <div class="scrollable-window" ng-if="twowayDevices.length">
      <div class="radio" ng-repeat="twowayDevice in twowayDevices">
        <label>
          <input type="radio" ng-model="device.mac" ng-value="twowayDevice.mac"> {{twowayDevice.name === 'TRF-ZW1' ? 'TRF-ZW' : twowayDevice.name}} <span class="margin-left-md">{{twowayDevice.mac | macAddress}}</span></span>
        </label>
      </div>
    </div>

    <div class="left-and-right">
      <go-back state="menu.programming.add-advanced-device.device-name"></go-back>
      <button type="submit" class="btn btn-primary" ng-disabled="deviceAddForm.$invalid" ng-if="!trfZwLink || device.type.name != 'TRF-ZW1'">Finish</button>
      <button type="submit" class="btn btn-primary" ng-disabled="deviceAddForm.$invalid" ng-if="trfZwLink && device.type.name == 'TRF-ZW1'">Next <i class="fa fa-caret-right"></i></button>
    </div>

  </form>
</div>

<div ng-if="device.addType === 'mac'">
  <h4 class="bg-primary">Advanced Device Identification</h4>
  <p>Enter the MAC address for the device you are adding.</p>

  <form name="deviceAddForm" role="form" ng-submit="doNext()" novalidate>

    <div class="system-key">
      <input class="form-control programming-key" id="mac1" ng-model="device.key.mac1" type="text" maxlength="2" ng-minlength="2" ng-pattern="/^[a-z0-9]+$/i" auto-tab-to="mac2" required> :
      <input class="form-control programming-key" id="mac2" ng-model="device.key.mac2" type="text" maxlength="2" ng-minlength="2" ng-pattern="/^[a-z0-9]+$/i" auto-tab-to="mac3" required> :
      <input class="form-control programming-key" id="mac3" ng-model="device.key.mac3" type="text" maxlength="2" ng-minlength="2" ng-pattern="/^[a-z0-9]+$/i" auto-tab-to="mac4" required> :
      <input class="form-control programming-key" id="mac4" ng-model="device.key.mac4" type="text" maxlength="2" ng-minlength="2" ng-pattern="/^[a-z0-9]+$/i" auto-tab-to="mac5" required> :
      <input class="form-control programming-key" id="mac5" ng-model="device.key.mac5" type="text" maxlength="2" ng-minlength="2" ng-pattern="/^[a-z0-9]+$/i" auto-tab-to="mac6" required> :
      <input class="form-control programming-key" id="mac6" ng-model="device.key.mac6" type="text" maxlength="2" ng-minlength="2" ng-pattern="/^[a-z0-9]+$/i" required>

      <p class="help-block" ng-show="deviceAddForm.key.$error.required && deviceAddForm.key.$dirty">Please enter a valid MAC address.</p>
    </div>

    <div class="left-and-right">
      <go-back state="menu.programming.add-advanced-device.device-name"></go-back>
      <button type="submit" class="btn btn-primary" ng-disabled="deviceAddForm.$invalid">Next</button>
    </div>

  </form>
</div>

<div ng-if="device.addType === 'ip'">
  <h4 class="bg-primary">Advanced Device Identification</h4>
  <p>Enter the IP address and port for the device you are adding.</p>

  <form name="deviceAddForm" role="form" ng-submit="doNext()" novalidate>

    <div class="form-group">
      <div class="form-group">
        <label for="ipAddress">IP address</label>
        <input class="form-control" type="text" name="ipAddress" ng-model="device.ip.address" placeholder="Enter IP address" ng-pattern="/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/" required>
        <p class="help-block" ng-show="deviceAddForm.ipAddress.$error.required && deviceAddForm.ipAddress.$dirty">An IP address is required.</p>
        <p class="help-block" ng-show="deviceAddForm.ipAddress.$error.pattern && deviceAddForm.ipAddress.$dirty">Please enter a valid IP address.</p>
      </div>

      <div class="form-group">
        <label for="port">Port</label>
        <input class="form-control" type="number" name="port" ng-model="device.ip.port" placeholder="Enter port number" min="0" max="65535" ng-maxlength="5" required>
        <p class="help-block" ng-show="deviceAddForm.port.$error.required && deviceAddForm.port.$dirty">A port number is required.</p>
        <p class="help-block" ng-show="deviceAddForm.port.$error.min || deviceAddForm.port.$error.max && deviceAddForm.port.$dirty">Please enter a number between 0 and 65535.</p>
      </div>
    </div>

    <div class="left-and-right">
      <go-back state="menu.programming.add-advanced-device.device-name"></go-back>
      <button type="submit" class="btn btn-primary" ng-disabled="deviceAddForm.$invalid">Finish</button>
    </div>

  </form>
</div>