 <div class="control-group" title="">
    <label class="control-label" for="settings-defaultWebcam">{{ _('Default Webcam') }}</label>
    <div class="controls">
        <select id="settings-defaultWebcam" data-bind="options: webcam_webcams,
                                optionsText: function(key) { return key.displayName },
                                optionsValue: function(key) { return key.name },
                                value: webcam_defaultWebcam">
        </select>


        <!-- ko foreach: webcam_webcams -->
            <!-- ko if: name == $parent.webcam_defaultWebcam() -->
                <span class="help-inline" style="padding-top: 10px; padding-bottom: 10px;">
                    <span><b>{{ _('MJPEG stream')}}&nbsp;</b></span>
                    <!-- ko if: compat != null && compat.stream -->
                        <span data-bind="text: compat.stream"></span>&nbsp;
                        <a data-bind="attr: { href: compat.stream }" target="_blank"><i class="fa-solid fa-up-right-from-square"></i></a>
                    <!-- /ko -->
                    <!-- ko ifnot: compat != null && compat.stream -->
                        <span>{{ _('Not supported')}}</span>
                    <!-- /ko -->
                </span>
            <!-- /ko -->
        <!-- /ko -->

        <span class="help-inline">{{ _('Selects the default webcam. If this webcam provides a MJPEG video stream, it will be available for old clients that do not make use of the webcam plugin system introduced with OctoPrint 1.9.0') }}</span>

        <span class="help-inline" style="padding-top: 10px;">{{ _('You can make changes to this webcam in the plugin\'s settings.') }}</span>

    </div>
</div>
