<div class="options">
    {{#if webrtc.canListDevices}}
        {{#if (and webrtc.cameraList.length video)}}
            <div class="entry-row">
                <div class="entry-label">
                    <label for="{{concat elementId '-camera-select'}}">
                        <span class="sr-only">
                            {{t "webrtcDevices.videoSource"}}
                        </span>
                        <i class="pc-moon pc-video" title="{{t "webrtcDevices.cameraSelect"}}"></i>
                    </label>
                </div>
                <div class="entry-values">
                    {{#if webrtc.hasCamera}}
                        {{#x-select id=(concat elementId '-camera-select')
                           value=selectedCameraId
                           action="changeCamera"
                           class="form-control camera-select"}}
                            {{#each webrtc.cameraList as |camera|}}
                                {{#x-option value=camera.deviceId}}{{camera.label}}{{/x-option}}
                            {{/each}}
                        {{/x-select}}
                    {{else}}
                        <span>{{t "webrtcDevices.noCameraDetected"}}</span>
                    {{/if}}
                </div>
            </div>
            {{#if advancedOptions}}
                <div class="entry-row">
                    <div class="entry-label">
                        <label for="{{concat elementId '-filter-select'}}">
                            <i class="pc pc-picture"></i>
                        </label>
                    </div>
                    <div class="entry-values">
                        {{#x-select
                           id=(concat elementId '-filter-select')
                           value=selectedFilter
                           action="changeFilter"
                           class="form-control filter-select"}}
                            {{#each advancedOptions as |filter|}}
                                {{#x-option value=filter}}{{filter}}{{/x-option}}
                            {{/each}}
                        {{/x-select}}
                    </div>
                </div>
            {{/if}}
        {{/if}}
        {{#if showInputDevicePicker}}
            <div class="entry-row">
                <div class="entry-label">
                    <label for="{{concat elementId '-microphone-select'}}">
                        <span class="sr-only">
                            {{t "webrtcDevices.audioSource"}}
                        </span>
                        <i class="pc-moon pc-microphone" title="{{t "webrtcDevices.microphoneSelect"}}"></i>
                    </label>
                </div>
                <div class="entry-values">
                    {{#if webrtc.hasMicrophone}}
                        {{#x-select
                           id=(concat elementId '-microphone-select')
                           value=selectedMicrophoneId
                           action="changeMicrophone"
                           class="form-control microphone-select"}}
                            {{#each webrtc.microphoneList as |microphone|}}
                                {{#x-option value=microphone.deviceId}}{{microphone.label}}{{/x-option}}
                            {{/each}}
                        {{/x-select}}
                    {{else}}
                        <span>{{t "webrtcDevices.noMicrophoneDetected"}}</span>
                    {{/if}}
                </div>
            </div>
        {{/if}}
        {{#if showResolutionPicker}}
            <div class="entry-row">
                <div class="entry-label">
                    <label for="{{concat elementId '-resolution-select'}}">
                        <span class="sr-only">
                            {{t "webrtcDevices.resolution"}}
                        </span>
                        <i class="pc pc-signal" title="{{t "webrtcDevices.resolutionSelect"}}"></i>
                    </label>
                </div>
                <div class="entry-values">
                    {{#x-select
                       id=(concat elementId '-resolution-select')
                       value=selectedResolutionId
                       action="changeResolution"
                       class="form-control resolution-select"}}
                        {{#each webrtc.resolutionList as |resolution|}}
                            {{#x-option value=resolution.presetId}}{{resolution.label}}{{/x-option}}
                        {{/each}}
                    {{/x-select}}
                </div>
            </div>
        {{/if}}
    {{else}}
        <div class="browser-settings-message">
            {{t "webrtcDevices.browserMediaSettings"}}
        </div>
    {{/if}}
    {{#if showOutputDevicePicker}}
        <div class="entry-row">
            <div class="entry-label audio-selection">
                <label for="{{concat elementId '-outputDevice-select'}}">
                    <span class="sr-only">
                        {{t "webrtcDevices.audioDestination"}}
                    </span>
                    <i class="pc pc-speakers" title="{{t "webrtcDevices.outputSelect"}}"></i>
                </label>
            </div>
            <div class="entry-values">
                {{#if webrtc.outputDeviceList.length}}
                    {{#x-select
                       id=(concat elementId '-speakers-select')
                       value=selectedOutputDeviceId
                       action="changeOutputDevice"
                       class="form-control speakers-select"}}
                        {{#each webrtc.outputDeviceList as |outputDevice|}}
                            {{#x-option value=outputDevice.deviceId}}{{outputDevice.label}}{{/x-option}}
                        {{/each}}
                    {{/x-select}}
                {{else}}
                    <span class="system-default-message">{{t "webrtcDevices.outputDeviceSystemDefault"}}</span>
                {{/if}}
            </div>
        </div>
    {{/if}}
    {{#if showTroubleshoot}}
        <div class="entry-row troubleshoot">
            <div class="entry-values">
                <button type="button" class="btn btn-link troubleshoot-link" {{action "openTroubleshoot"}}>
                    {{t "webrtcDevices.troubleshoot"}}
                </button>
            </div>
        </div>
    {{/if}}
</div>
