<!-- Source Modal -->
<div id="stream-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="stream-modal-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="stream-modal-title" data-i18n="streams.add">Add Source</h2>
            <button class="modal-close-btn" onclick="closeStreamModal()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <!-- Loading overlay shown while dropdowns are being populated -->
            <div id="stream-modal-loading" class="modal-body-loading" style="display:none">
                <div class="loading-spinner"></div>
                <div class="modal-body-loading-text" data-i18n="streams.modal.loading">Loading...</div>
            </div>
            <input type="hidden" id="stream-id">
            <form id="stream-form">
                <div class="form-group">
                    <label for="stream-name" data-i18n="streams.name">Source Name:</label>
                    <input type="text" id="stream-name" data-i18n-placeholder="streams.name.placeholder" placeholder="My Source" required>
                    <div id="stream-tags-container"></div>
                </div>

                <input type="hidden" id="stream-type" value="raw">

                <!-- Raw source fields -->
                <div id="stream-raw-fields">
                    <div class="form-group">
                        <div class="label-row">
                            <label data-i18n="streams.display">Display:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="streams.display.hint">Which screen to capture</small>
                        <input type="hidden" id="stream-display-index" value="">
                        <button type="button" class="btn btn-display-picker" id="stream-display-picker-btn" onclick="openDisplayPicker(onStreamDisplaySelected, document.getElementById('stream-display-index').value, document.getElementById('stream-capture-template').selectedOptions[0]?.dataset?.hasOwnDisplays === '1' ? document.getElementById('stream-capture-template').selectedOptions[0].dataset.engineType : null)">
                            <span id="stream-display-picker-label" data-i18n="displays.picker.select">Select display...</span>
                        </button>
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="stream-capture-template" data-i18n="streams.capture_template">Capture Template:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="streams.capture_template.hint">Engine template defining how the screen is captured</small>
                        <select id="stream-capture-template"></select>
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="stream-target-fps" data-i18n="streams.target_fps">Target FPS:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="streams.target_fps.hint">Target frames per second for capture (1-90)</small>
                        <div class="slider-row">
                            <input type="range" id="stream-target-fps" min="1" max="90" value="30" oninput="document.getElementById('stream-target-fps-value').textContent = this.value">
                            <span id="stream-target-fps-value" class="slider-value">30</span>
                        </div>
                    </div>
                </div>

                <!-- Processed source fields -->
                <div id="stream-processed-fields" style="display: none;">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="stream-source" data-i18n="streams.source">Source:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="streams.source.hint">The source to apply processing filters to</small>
                        <select id="stream-source"></select>
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="stream-pp-template" data-i18n="streams.pp_template">Processing Template:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="streams.pp_template.hint">Filter template to apply to the source</small>
                        <select id="stream-pp-template"></select>
                    </div>
                </div>

                <!-- Static image fields -->
                <div id="stream-static-image-fields" style="display: none;">
                    <div class="form-group">
                        <label for="stream-image-asset" data-i18n="streams.image_asset">Image Asset:</label>
                        <select id="stream-image-asset"></select>
                    </div>
                </div>

                <div id="stream-video-fields" style="display: none;">
                    <div class="form-group">
                        <label for="stream-video-asset" data-i18n="streams.video_asset">Video Asset:</label>
                        <select id="stream-video-asset"></select>
                    </div>
                    <div class="form-group settings-toggle-group">
                        <label data-i18n="picture_source.video.loop">Loop:</label>
                        <label class="settings-toggle">
                            <input type="checkbox" id="stream-video-loop" checked>
                            <span class="settings-toggle-slider"></span>
                        </label>
                    </div>
                    <div class="form-row">
                        <div class="form-group" style="flex:1">
                            <label for="stream-video-speed" data-i18n="picture_source.video.speed">Playback Speed: <span id="stream-video-speed-value">1.0</span>×</label>
                            <input type="range" id="stream-video-speed" min="0.1" max="5" step="0.1" value="1.0" oninput="document.getElementById('stream-video-speed-value').textContent=this.value">
                        </div>
                        <div class="form-group" style="flex:1">
                            <label for="stream-video-fps" data-i18n="streams.target_fps">Target FPS:</label>
                            <input type="number" id="stream-video-fps" min="1" max="60" step="1" value="30">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group" style="flex:1">
                            <label for="stream-video-start" data-i18n="picture_source.video.start_time">Start Time (s):</label>
                            <input type="number" id="stream-video-start" min="0" step="0.1">
                        </div>
                        <div class="form-group" style="flex:1">
                            <label for="stream-video-end" data-i18n="picture_source.video.end_time">End Time (s):</label>
                            <input type="number" id="stream-video-end" min="0" step="0.1">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="stream-video-resolution" data-i18n="picture_source.video.resolution_limit">Max Width (px):</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="picture_source.video.resolution_limit.hint">Downscale video at decode time for performance</small>
                        <input type="number" id="stream-video-resolution" min="64" max="7680" step="1" placeholder="720">
                    </div>
                </div>

                <div class="form-group">
                    <label for="stream-description" data-i18n="streams.description_label">Description (optional):</label>
                    <input type="text" id="stream-description" data-i18n-placeholder="streams.description_placeholder" placeholder="Describe this source...">
                </div>

                <div id="stream-error" class="error-message" style="display: none;"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-icon btn-secondary" onclick="closeStreamModal()" title="Cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
            <button class="btn btn-icon btn-primary" onclick="saveStream()" title="Save" data-i18n-aria-label="aria.save">&#x2713;</button>
        </div>
    </div>
</div>
