<div class="modal-header">
  <h3 class="modal-title">Device Settings</h3>
</div>
<div class="modal-body">

  <div class="form-group" ng-show="mydata.useVideo">
    <label for="settings-camera">Camera:</label>
    <select name="camera" id="settings-camera" class="form-control"
            ng-model="mydata.selectedVideo" ng-options="item.id as item.label for item in verto.data.videoDevices">
    </select>
  </div>

  <div class="form-group" ng-show="mydata.useVideo">
    <label for="settings-share-device">Share device:</label>
    <select name="share-device" id="settings-share-device" class="form-control"
            ng-model="mydata.selectedShare" ng-options="item.id as item.label for item in verto.data.shareDevices">
    </select>
  </div>

  <div class="form-group">
    <label for="settings-microphone">Microphone:</label>
    <select name="microphone" id="settings-microphone" class="form-control"
            ng-model="mydata.selectedAudio" ng-options="item.id as item.label for item in verto.data.audioDevices">
    </select>
  </div>

  <div class="form-group">
    <label for="settings-microphone">Speaker:</label>
    <select name="microphone" id="settings-microphone" class="form-control"
            ng-model="mydata.selectedSpeaker" ng-options="item.id as item.label for item in verto.data.speakerDevices">
    </select>
  </div>

  <a class="btn btn-primary" href="" ng-click="refreshDeviceList()">Refresh device list</a>

  <div class="form-group">
    <label for="settings-microphone">General settings:</label>
    <div class="checkbox">
      <label>
        <input type="checkbox" name="use_video" value="mydata.useVideo" ng-model="mydata.useVideo">
        Use Video
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" name="use_stereo_audio" ng-value="mydata.useStereo" ng-model="mydata.useStereo">
        Stereo Audio
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" name="use_stun" ng-value="mydata.useSTUN" ng-model="mydata.useSTUN">
        Use STUN
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" name="mirror_input" ng-value="mydata.mirrorInput" ng-model="mydata.mirrorInput">
        Scale Remote Video To Match Camera Resolution
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" name="ask_recover_call" ng-value="mydata.askRecoverCall" ng-model="mydata.askRecoverCall">
        Ask before recovering call
      </label>
    </div>

  </div>

  <div class="form-group">
    <label for="settings-microphone">Audio settings:</label>
    <div class="checkbox">
      <label>
        <input type="checkbox" name="googEchoCancellation" value="mydata.googEchoCancellation" ng-model="mydata.googEchoCancellation">
        Echo Cancellation
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" name="googNoiseSuppression" value="mydata.googNoiseSuppression" ng-model="mydata.googNoiseSuppression">
        Noise Suppression
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" name="googHighpassFilter" value="mydata.googHighpassFilter" ng-model="mydata.googHighpassFilter">
        Highpass Filter
      </label>
    </div>
  </div>

  <div class="form-group">
    <label>Video settings:</label> <br>
    <input type="hidden" name="use_dedenc" ng-value="mydata.useDedenc" ng-model="mydata.useDedenc">


    <div ng-show="mydata.useDedenc" class="dedicated_encoder">
      <p>Dedicated Remote Encoder enabled.</b>
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="mydata.autoBand" ng-change="checkAutoBand(mydata.autoBand)">
        Automatically determine speed and resolution settings
      </label>
    </div>

    <div class="checkbox" ng-show="mydata.autoBand">
      <label>
        <input type="checkbox" ng-model="mydata.testSpeedJoin">
        Recheck bandwidth before each outgoing call
      </label>
    </div>

    <a ng-show="mydata.autoBand" class="btn btn-primary" href="" ng-click="testSpeed()">Check Network Speed</a> <span ng-bind="speedMsg"></span>

    <div ng-show="!mydata.autoBand">
      <label for="video-quality">Video quality:</label>
      <select name="video_quality" id="video-quality" class="form-control"
              ng-disabled="mydata.autoBand"
              ng-model="mydata.vidQual"
              ng-options="item.id as item.label for item in verto.videoQuality"></select>
    </div>

    <div ng-show="!mydata.autoBand">
      <label for="incoming-bandwidth">Max incoming bandwidth:</label>
      <select name="incoming_bandwidth" id="incoming-bandwidth" class="form-control"
              ng-model="mydata.incomingBandwidth"
  	    ng-change="checkUseDedRemoteEncoder(mydata.incomingBandwidth)"
              ng-options="item.id as item.label for item in verto.bandwidth"></select>
    </div>

    <div ng-show="!mydata.autoBand">
      <label for="outgoing-bandwidth">Max outgoing bandwidth:</label>
      <select name="outgoing_bandwidth" id="outgoing-bandwidth" class="form-control"
              ng-model="mydata.outgoingBandwidth"
              ng-options="item.id as item.label for item in verto.bandwidth"></select>
    </div>
  </div>

</div>
<div class="modal-footer">
  <button class="btn btn-danger pull-left btn-pull-left" ng-click="resetSettings()">Factory reset</button>
  <!-- <button class="btn btn-primary" ng-click="cancel()">Cancel</button> -->
  <button class="btn btn-primary" ng-click="ok()">Save Device Settings</button>
</div>
