<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="editDevice(selections.room, selections.device); $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.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>Command repeat setting:</label>

            <div>
              Commands sent from an automated activity always repeat:
              <input class="form-input-inline" type="number" name="repeatMacro" ng-model="selections.device.repeat_macro" min="1" max="255" required>
              <ng-pluralize count="selections.device.repeat_macro" when="{ '1': 'time', 'other': 'times'}"></ng-pluralize>
              <p class="help-block" ng-show="editDeviceForm.repeatMacro.$error.required && editDeviceForm.repeatMacro.$dirty">This field is required.</p>
              <p class="help-block" ng-show="editDeviceForm.repeatMacro.$error.min || editDeviceForm.repeatMacro.$error.max && editDeviceForm.repeatMacro.$dirty">Please enter a number between 1 and 255.</p>
            </div>
            <div>
              Button pressing repeats the command at least:
              <select class="btn btn-default" name="repeatMin" ng-model="selections.device.repeat_min" ng-options="value for value in [1,2,3,4,5,6,7,8,9,10]" >  </select>
              <ng-pluralize count="selections.device.repeat_min" when="{ '1': 'time', 'other': 'times'}"></ng-pluralize>
            </div>
          </div>



          <div ng-if="selections.device.target_type === 1">

            <div class="form-group">
              <label>Base station infrared (IR) output setting:</label>
              <div class="radio">
                <label>
                  <input type="radio" name="rear"  ng-model="ir.target"  ng-value="1"> Wired IR emitters attached to my device
                  &nbsp&nbsp&nbspIR Port: <select class="btn btn-default" name="irPort" ng-model="ir.port" ng-disabled="1 != ir.target" ng-options="value.value as value.name for value in irPortOptions"> </select>
                </label>
              </div>

              <div class="radio">
                <label>
                  <input type="radio" name="front" ng-model="ir.target"  ng-value="2"> Wireless IR (requires line of sight from the base station to the device)
                </label>
              </div>
            </div>

            <div class="form-group">
              <label>Controller Assignment:</label>&nbsp;
              <select ng-model="selections.device.target_addr" ng-options="baseStation.mac as baseStation.name +' (' + baseStation.type + ')' for baseStation in selections.room.bstations" required></select>
            </div>

          </div>



          <div ng-if="selections.device.target_type === 2 || selections.device.target_type === 3">
            <div class="form-group">
              <label>Speed setting for continuously repeating command:</label>
              <div>
                Repeating starts after holding a button for:
                <input class="form-input-inline" type="number" name="rampStart" ng-model="selections.device.ramp_start" min="0.1" max="9.9" step="0.1" required>
                <ng-pluralize count="selections.device.ramp_start" when="{ '1': 'second', 'other': 'seconds'}"></ng-pluralize>
                <p class="help-block" ng-show="editDeviceForm.rampStart.$error.required && editDeviceForm.rampStart.$dirty">This field is required.</p>
                <p class="help-block" ng-show="editDeviceForm.rampStart.$error.min || editDeviceForm.rampStart.$error.max && editDeviceForm.rampStart.$dirty">Please enter a number between 0.1 and 9.9.</p>
              </div>
              <div>
                While holding, repeat the command every:
                <input class="form-input-inline" type="number" name="rampSpeed" ng-model="selections.device.ramp_speed" min="0.1" max="9.9" step="0.1" required>
                <ng-pluralize count="selections.device.ramp_speed" when="{ '1': 'second', 'other': 'seconds'}"></ng-pluralize>
                <p class="help-block" ng-show="editDeviceForm.rampSpeed.$error.required && editDeviceForm.rampSpeed.$dirty">This field is required.</p>
                <p class="help-block" ng-show="editDeviceForm.rampSpeed.$error.min || editDeviceForm.rampSpeed.$error.max && editDeviceForm.rampSpeed.$dirty">Please enter a number between 0.1 and 9.9.</p>
              </div>
            </div>

            <hr/>

            <p>Verify the IP of the device to be controlled and enter it here along with the port used for controlling it.</p>

            <div class="form-group">
              <label for="ip-address">IP address</label>
              <input class="form-control" id="ip-address" type="text" name="ipAddress" placeholder="Enter IP address" ng-model="selections.device.target_addr" 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">
              <label for="port">Port</label>
              <input class="form-control" id="port" type="number" name="port" placeholder="Enter port number" ng-model="selections.device.target_port" min="0" max="65535" 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>


        </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>
