<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" ng-show="title">
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h4 class="modal-title">{{title}}</h4>
      </div>
      <form name="editDeviceForm" role="form" ng-submit="editTwowayDevice(selections.room, selections.device, ttype); $hide()" novalidate>
        <div class="modal-body">
          <div class="form-group">
            <label for="device-name">Enter a name for the device:</label>
            <input class="form-control" id="device-name" type="text" name="deviceName" placeholder="Device name" ng-model="selections.device.name" ng-maxlength="32" required>
            <p class="help-block" ng-show="editDeviceForm.deviceName.$error.required && editDeviceForm.deviceName.$dirty">A valid device name is required.</p>
            <p class="help-block" ng-show="editDeviceForm.deviceName.$error.maxlength && editDeviceForm.deviceName.$dirty">The device name cannot be longer than 32 characters.</p>
          </div>

          <div class="form-group">
            <label>Advanced device type:</label>
            <p>{{selections.device.model === 'TRF-ZW1' ? 'TRF-ZW' : selections.device.model}}</p>
            <p ng-if="selections.device.model === 'TRF-ZW1'"><button type="button" class="btn btn-primary" ng-click="updateTrfzwData()">Update data from TRF-ZW</button></p>
            <p ng-if="trfZwLink && selections.device.model === 'TRF-ZW1'"><a href="{{urcPortalUrl}}" class="btn btn-success" target="_blank">Connect and program TRF-ZW</a></p>
          </div>

          <div class="form-group" ng-if="selections.device.fw_run_version">
            <label>Version:</label>
            <p>{{selections.device.fw_run_version}}<br><span ng-if="selections.device.fw_version && selections.device.fw_run_version != selections.device.fw_version">Download to update to: {{selections.device.fw_version}}</span></p>
          </div>

          <div class="form-group" ng-if="selections.device.type === 'ip'">
            <label for="ipAddress">IP address</label>
            <input class="form-control" type="text" name="ipAddress" placeholder="Enter IP address" ng-model="selections.device.ip" 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="editDeviceForm.ipAddress.$error.required && editDeviceForm.ipAddress.$dirty">An IP address is required.</p>
            <p class="help-block" ng-show="editDeviceForm.ipAddress.$error.pattern && editDeviceForm.ipAddress.$dirty">Please enter a valid IP address.</p>
          </div>

          <div class="form-group" ng-if="selections.device.type === 'discovery' || selections.device.type === 'mac'">
            <label for="mac">MAC</label>
            <input class="form-control" type="text" name="mac" placeholder="Enter MAC address" ng-model="selections.device.target_addr" ng-pattern="/^([0-9A-F]{2}[:-]){5}([0-9A-F]{2})$/" required>
            <p class="help-block" ng-show="editDeviceForm.mac.$error.required && editDeviceForm.mac.$dirty">A MAC address is required.</p>
            <p class="help-block" ng-show="editDeviceForm.mac.$error.pattern && editDeviceForm.mac.$dirty">Please enter a valid MAC address.</p>
          </div>

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

          <div class="form-group">
            <p ng-if="selections.device.type === 'discovery'">The MAC of your device does not normally need to be changed unless the device is not responding.</p>
            <p ng-if="selections.device.type === 'mac'">The MAC of your device does not normally need to be changed unless the device is not responding.</p>
            <p ng-if="selections.device.type === 'ip'">The IP address and port of your device do not normally need to be changed unless the device is not responding.</p>
          </div>

          <div ng-if="selections.device.hasVariables">
            <div ng-if="selections.device.varUsername">
              <hr  />

              <div class="form-group">
                <label for="username">User Name:</label>
                <input class="form-control" type="text" name="username" ng-model="selections.device.varUsername.value" readonly>
                <div class="margin-top-md">
                  <button type="button" class="btn btn-primary" ng-click="showModal('edit-twoway-username')">Change username/password</button>
                </div>
              </div>
            </div>

            <div ng-if="selections.device.varData.length">
              <hr />

              <div class="margin-top-md">
                <button type="button" class="btn btn-primary" ng-click="showModal('edit-twoway-parameters')">Edit device parameters</button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary" ng-disabled="editDeviceForm.$invalid">Save</button>
          <button type="button" class="btn btn-danger" ng-click="cancelEdit(); $hide()">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>
