{{#if showEditPart}}
    <div class='device-selection'>
        {{#if webrtc.canListDevices}}
            <svg class="svg-icon">
              <use xlink:href="#icon-mixer"></use>
            </svg>
            {{input placeholder=profileNameLabel value=selectedProfile.name id=(concat elementId '-profile-input') classNames="form-control"}}
            {{#if audio}}
                <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"
                            one-way=true
                            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 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"
                            one-way=true
                            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 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"
                            one-way=true
                            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}}
            {{#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"
                        one-way=true
                        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}}
            <button {{action "saveProfileEdition"}} class='btn btn-info' title="{{t "webrtcDevices.saveLabel"}}">
                {{t "webrtcDevices.saveLabel"}}
            </button>
            <button {{action "cancelProfileEdition"}} class='btn btn-link' title="{{t "webrtcDevices.cancelLabel"}}">
                {{t "webrtcDevices.cancelLabel"}}
            </button>
        {{else}}
            <div class="browser-settings-message">
                {{t "webrtcDevices.browserMediaSettings"}}
            </div>
        {{/if}}
    </div>
{{else}}
    <div class="entry-row">
        <div class="entry-label">
            <label for="{{concat elementId '-profile-select'}}">
                <span class="sr-only">
                    {{t "webrtcDevices.profiles"}}
                </span>
            </label>
        </div>
        <div class="entry-values">
            {{#profile-dropdown-menu title=selectedProfileName id=(concat elementId '-profile-select1')}}
                {{#each profileFilteredList as |profile|}}
                    <li id='{{profile.name}}' class="{{if profile.isDisabled "disabled"}}">
                        <a role="menuitem" tabindex="0" {{action 'changeProfile' profile}}>
                            {{profile.name}}
                        </a>
                        {{#unless isReadOnly}}
                            <button class='btn btn-delete' title="{{t "webrtcDevices.removeProfile"}}" {{action 'deleteProfile' profile.id bubbles=false}}>
                                <i class="pc pc-delete"></i>
                                <span class='sr-only'>{{t "webrtcDevices.removeProfile"}}</span>
                            </button>
                        {{/unless}}
                    </li>
                {{/each}}
                <li id='default'><a role="menuitem" tabindex="0" {{action 'useComputerSettings'}}>{{t "webrtcDevices.useComputerSettings"}}</a></li>
                {{#unless isReadOnly}}
                    <li class='divider'></li>
                    <li id='new'><a role="menuitem" tabindex="0" {{action 'createNewProfile'}}>{{t "webrtcDevices.newProfile"}}</a></li>
                {{/unless}}
            {{/profile-dropdown-menu}}
        </div>
        {{#unless isReadOnly}}
            {{#if canEdit}}
                <div class="entry-action">
                    <button title="{{t "webrtcDevices.editProfile"}}" class="btn btn-edit" {{action "showEditProfile"}}>
                        <i class="pc pc-pencil"></i>
                        <span class='sr-only'>{{t "webrtcDevices.editProfile"}}</span>
                    </button>
                </div>
            {{/if}}
        {{/unless}}
    </div>
{{/if}}
{{#if showTroubleshoot}}
    <div class="entry-row troubleshoot">
        <div class="profile-footer-links">
            <button type="button" class="btn btn-link troubleshoot-link" {{action "openTroubleshoot"}}>
                {{t "webrtcDevices.troubleshoot2"}}
            </button>
            {{#if showVolumesLink}}
              <button type="button" class="btn btn-link troubleshoot-link" {{action "openSoundPreferences"}}>
                {{t "webrtcDevices.deviceVolumes"}}
              </button>
            {{/if}}
        </div>
    </div>
{{/if}}