<div class="centered-block-frame" id="preview">
  <div class="col-md-4 col-sm-12 col-xs-12 centered-block">
    <div class="panel panel-material-blue-900 shadow-z-2 ">
      <div class="panel-heading">
        <h3 class="panel-title text-center">{{ 'TITLE_PREVIEW_SETTINGS' | translate }}</h3>
      </div>
      <div class="panel-body">
        <div class="preview-wrapper">
          <video id="videopreview" muted autoplay style="width: 100%;"></video>
          <div id="mic-meter" ng-if="audioContext">
            <div class="volumes">
              <div class="volume-segment"></div>
              <div class="volume-segment"></div>
              <div class="volume-segment"></div>
              <div class="volume-segment"></div>
              <div class="volume-segment"></div>
            </div>
            <i class="icon mdi-hardware-keyboard-voice"></i>
          </div>
        </div>
        <form name="form">
          <div class="form-group col-md-5 col-sm-12 col-xs-12" ng-show="true">
            <label for="settings-camera">{{ 'CAMERA_SETTINGS' | translate }}</label>
            <select name="camera" id="settings-camera" class="form-control" ng-model="storage.data.selectedVideo"
                    ng-options="item.id as item.label for item in verto.data.videoDevices" ng-change="localVideo()" >
            </select>
          </div>
          <div class="form-group col-md-5 col-sm-12 col-xs-12" ng-show="true">
            <label for="settings-microphone">{{ 'MIC_SETTINGS' | translate }}</label>
            <select name="microphone" id="settings-microphone" class="form-control" ng-model="storage.data.selectedAudio"
                    ng-options="item.id as item.label for item in verto.data.audioDevices" ng-change="localVideo()">
            </select>
          </div>
          <a class="btn btn-primary btn-sm col-md-2 refresh" ng-click="refreshDeviceList()">
            <i class="icon  mdi-action-autorenew"></i>
          </a>

          <div class="form-group text-center">
            <button type="submit" class="btn btn-success" ng-click="endPreview()" title="{{ 'SAVE' | translate }}">
              {{ 'SAVE' | translate }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
