<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h5 class="modal-title">Test these commands</h5>
      </div>
      <div class="modal-body">

        <div ng-if="device.powerBtn || device.muteBtn">
          <p>If the device responds correctly you have found a usable code set.</p>
        </div>

        <div class="row" ng-if="device.powerBtn || device.muteBtn">
          <div class="col-sm-6 text-center">
            <div ng-if="device.powerBtn">
              <p>&nbsp;</p>
              <p>Make sure the device is off, then click the button to test.</p>
            </div>
          </div>
          <div class="col-sm-6 text-center">

          </div>
        </div>

        <div class="row" ng-if="device.powerBtn || device.muteBtn">
          <div class="col-sm-6 text-center" ng-if="device.powerBtn">
            <p>POWER ON</p>
            <button class="power-btn btn btn-default" ng-click="btnTest('power')"></button>
          </div>
          <div class="col-sm-6 text-center" ng-if="device.muteBtn">
            <p>VOLUME MUTE</p>
            <button class="mute-btn btn btn-default" ng-click="btnTest('mute')"></button>
          </div>
        </div>

        <div ng-if="!device.powerBtn && !device.muteBtn">
          <p>Select a command from the list and press the Test button below to test the code. If the device responds correctly you have found a usable code set.</p>
        </div>

        <div class="row" ng-if="!device.powerBtn && !device.muteBtn">
          <div class="col-sm-12">
            <label for="testFunc">Commands:</label>
          </div>
        </div>
        <div class="row" ng-if="!device.powerBtn && !device.muteBtn">
          <div class="col-sm-8">
            <div class="form-group">
              <select class="form-control" ng-model="device.testCmd">
                <option ng-repeat="btn in device.info.btns" value="{{btn.cmd}}">
                  {{btn.caption}}
                </option>
              </select>
            </div>
          </div>
          <div class="col-sm-4 text-right">
            <button class="btn btn-primary ng-isolate-scope" ng-click="btnTest(device.testCmd)">Test it!</button>
          </div>
        </div>

        <p>&nbsp;</p>

        <div ng-if="device.targetType === 1">
          <p>Aim the lens on the front of the base station directly at the device. Commands are sent from the front panel and rear ports of the base station.</p>

          <div class="form-group" ng-if="room.bstations.length > 1">
            <label for="testBstation">Controller Assignment:</label>
            <select class="form-control" ng-model="device.testBstationMac">
              <option ng-repeat="bstation in room.bstations" value="{{bstation.mac}}">
                {{bstation.name}} ({{bstation.type}})
              </option>
            </select>
          </div>
          <p>Commands are sent through the controller with the following MAC: {{device.testBstationMac | macAddress}}</p>
        </div>

        <div ng-if="device.targetType === 2">
          <p>Enter the IP address and port used to control the device you are testing.</p>

          <form name="deviceTestForm" role="form" novalidate>
            <div class="form-group">
              <div class="form-group">
                <label for="ipAddress">IP address</label>
                <input class="form-control" type="text" name="ipAddress" placeholder="Enter IP address" ng-model="device.targetAddr" 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="deviceTestForm.ipAddress.$error.required && deviceTestForm.ipAddress.$dirty">An IP address is required.</p>
                <p class="help-block" ng-show="deviceTestForm.ipAddress.$error.pattern && deviceTestForm.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" placeholder="Enter port number" ng-model="device.targetPort" min="0" max="65535" ng-maxlength="5" required>
                <p class="help-block" ng-show="deviceTestForm.port.$error.required && deviceTestForm.port.$dirty">A port number is required.</p>
                <p class="help-block" ng-show="deviceTestForm.port.$error.min || deviceTestForm.port.$error.max && deviceSettingsForm.port.$dirty">Please enter a number between 0 and 65535.</p>
              </div>
            </div>
          </form>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" ng-click="doNext(); $hide()">Save</button>
        <button type="button" class="btn btn-danger" ng-click="$hide()">Cancel</button>
      </div>
    </div>
  </div>
</div>