<h4 class="bg-primary">Advanced Device Identification</h4>

<div ng-if="device.addType === 'mac' || (device.varStep === 'mac_ip' && device.model.target_type === 1)">
  <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.more-device-name"></go-back>
      <button type="submit" class="btn btn-primary" ng-disabled="deviceAddForm.$invalid">Finish</button>
    </div>

  </form>
</div>

<div ng-if="device.addType === 'ip' || (device.varStep === 'mac_ip' && device.model.target_type === 2)">
  <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 ng-readonly="device.varPort">
        <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.more-device-name"></go-back>
      <button type="submit" class="btn btn-primary btn-next" ng-disabled="deviceAddForm.$invalid">Next</button>
    </div>

  </form>
</div>

<div ng-if="device.varStep === 'UP'">
  <p>Enter the username and password required for the device.</p>

  <p ng-if="device.category.name">Device type is: <strong class="text-primary">{{device.category.name}}</strong></p>
  <p>Labeled: <strong class="text-primary">{{device.name}}</strong></p>
  <p ng-if="device.brand.name">Manufacturer: <strong class="text-primary">{{device.brand.name}}</strong></p>
  <p>Model: <strong class="text-primary">{{device.model.name}}</strong></p>

  <form name="addVarForm" role="form" ng-submit="doNext()" novalidate>
    <div ng-repeat="variable in device.variables">
      <div class="form-group" ng-if="variable.name === 'username'">
        <label>{{variable.caption}} :</label>
        <input class="form-control" type="text" name="{{variable.name}}" ng-model="device.varData[variable.name].value" required>
      </div>

      <div class="form-group" ng-if="variable.type === 'password'">
        <label>{{variable.caption.split('|')[0]}} :</label>
        <input class="form-control" type="password" name="{{variable.name}}" ng-model="device.varData[variable.name].value" required>
      </div>

      <div class="form-group" ng-if="variable.type === 'password'">
        <label>{{variable.caption.split('|')[1] ? variable.caption.split('|')[1] : 'Confirm ' + variable.name}} :</label>
        <input class="form-control" type="password" name="confirmedPassword" ng-model="device.varData.confirmedPassword" match="device.varData.password.value" required>
      </div>
    </div>

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

<div ng-if="device.varStep === 'V'">
  <p>This device has additional parameter information which may need to be filled out below.<br>Parameters marked width <span style="color:red;">*</span> are required.</p>

  <p ng-if="device.category.name">Device type is: <strong class="text-primary">{{device.category.name}}</strong></p>
  <p>Labeled: <strong class="text-primary">{{device.name}}</strong></p>
  <p ng-if="device.brand.name">Manufacturer: <strong class="text-primary">{{device.brand.name}}</strong></p>
  <p>Model: <strong class="text-primary">{{device.model.name}}</strong></p>

  <form name="addVarForm" role="form" ng-submit="doNext()" novalidate>
    <div class="form-group" ng-repeat="variable in device.variables">
      <div ng-if="variable.name !== 'username' && variable.name !== 'password' && variable.name !== 'device_port'">
        <label for="{{variable.name}}"><span ng-if="variable.required" style="color:red;">*</span> {{variable.caption}} <span ng-if="variable.required">(required)</span>:</label>
        <input class="form-control" ng-if="variable.type === 'text'" type="text" name="{{variable.name}}" ng-model="device.varData[variable.name].value" ng-required="variable.required" ng-readonly="variable.readonly">
        <input class="form-control" ng-if="variable.type === 'password'" type="password" name="{{variable.name}}" ng-model="device.varData[variable.name].value" ng-required="variable.required" ng-readonly="variable.readonly">
        <textarea class="form-control" ng-if="variable.type === 'textarea'" ng-style="{'height':variable.height ? (variable.height * 20 + 10) + 'px' : 'auto'}" name="{{variable.name}}" ng-model="device.varData[variable.name].value" ng-required="variable.required" ng-readonly="variable.readonly"></textarea>
      </div>
    </div>

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