<!-- New Signal Form Popup -->
<div class="form-popup" id="new_sig_form" style="display: none; overflow: hidden; position: absolute; width: 420px; height: 480px; border-radius: 10px;">

    <!-- Draggable Header Section -->
    <div class="dialog-header" id="signal_draggable_header">
        <h1 id="signal-form-header">Add New Signal</h1>
        <button class="dialog-close-btn" onclick="UI.signals.close_signal_Form()">&times;</button>
    </div>

    <!-- Main Content -->
    <form action="/new_signal" class="form-container" style="padding: 15px; overflow-y: auto;">
        <!-- Hidden field for tbl_key (used when editing) -->
        <input type="hidden" id="signal_tbl_key" name="signal_tbl_key" value="" />

        <!-- Panel 1 of 3 -->
        <div id="panel_1" class="form_panels" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
            <!-- Name Input field -->
            <div style="grid-column: 1 / span 2;">
                <label for='signal_name'><b>Signal Name:</b></label>
                <input type="text" id="signal_name" name="signal_name" style="width: 100%; margin-top: 5px;">
            </div>

            <!-- Source Input field -->
            <label for="sig_source"><b>Signal Source:</b></label>
            <select name="sig_source" id="sig_source" onchange="UI.signals.fill_prop('sig_prop', this.value)">
                {% set ns = namespace(optonVal=0) %}
                {% for each in indicator_list %}
                <option>{{each}}</option>
                {% if loop.index0 == 0 %}
                {% set ns.optonVal = each %}
                {% endif %}
                {% endfor %}
            </select>

            <!-- Property Input field -->
            <label for="sig_prop"><b>Property:</b></label>
            <select id="sig_prop" name="sig_prop"></select>

            <!-- Public checkbox -->
            <div style="grid-column: 1 / span 2; padding-top: 10px;">
                <label for="signal_public_checkbox" style="display: flex; align-items: center; gap: 8px;">
                    <input type="checkbox" id="signal_public_checkbox" name="signal_public" />
                    Make this signal public (visible to all users)
                </label>
            </div>

            <!-- Buttons -->
            <div style="grid-column: 1 / span 2; text-align: center; margin-top: 10px;">
                <button type="button" class="btn cancel" onclick="UI.signals.close_signal_Form()">Close</button>
                <button type="button" class="btn next" onclick="UI.signals.ns_next(1)">Next</button>
            </div>
        </div><!-- End panel 1 -->

        <!-- Panel 2 of 3 -->
        <div id="panel_2" class="form_panels" style="display: none; grid-template-columns: 1fr 1fr; gap: 10px;">
            <!-- Signal Type (hidden for pattern indicators) -->
            <div id="signal_type_row" style="grid-column: 1 / span 2;">
                <label for="signal_type"><b>Signal Type:</b></label>
                <select name="signal_type" id="select_s_type" style="margin-left: 10px;" onchange="UI.signals.hideIfTrue(this.value,'Value','subpanel_1');UI.signals.hideIfTrue(this.value,'Comparison','subpanel_2');">
                    <option>Value</option>
                    <option>Comparison</option>
                </select>
            </div>

            <!-- Display signal -->
            <span id="sig_display" style="grid-column: 1 / span 2; padding: 10px; background: #f8f9fa; border-radius: 5px;">name:{property}(operator)name:{property}</span>

            <!-- Standard Operator field (for non-pattern indicators) -->
            <div id="sig_operator" style="grid-column: 1 / span 2;">
                <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;">
                    <label><input type="radio" id="gt" name="Operator" value=">"> Greater than</label>
                    <label><input type="radio" id="lt" name="Operator" value="<"> Less than</label>
                    <label><input type="radio" id="eq" name="Operator" value="==" checked="checked"> Equals</label>
                    <label><input type="radio" id="within" name="Operator" value="+/-"> Within range</label>
                </div>
                <div style="display: flex; align-items: center; gap: 10px;">
                    <input type="range" id="rangeSlider" min="0" max="1000" value="100" onchange="document.getElementById('rangeVal').value=this.value;" style="flex: 1;">
                    <input type="text" id="rangeVal" value="100" style="width: 60px;" onchange="document.getElementById('rangeSlider').value=this.value;">
                </div>
            </div>

            <!-- Pattern Operator field (for candlestick pattern indicators) -->
            <div id="pattern_operator" style="grid-column: 1 / span 2; display: none;">
                <label style="font-weight: bold; display: block; margin-bottom: 10px;">Pattern Detection:</label>
                <div style="display: flex; flex-direction: column; gap: 8px;">
                    <label style="display: flex; align-items: center; gap: 8px; padding: 8px; background: #f0f8ff; border-radius: 5px; cursor: pointer;">
                        <input type="radio" name="PatternOperator" value="is_detected" checked="checked">
                        <span style="flex: 1;"><strong>Any Pattern Detected</strong></span>
                        <span style="color: #666; font-size: 11px;">Bullish or Bearish</span>
                    </label>
                    <label style="display: flex; align-items: center; gap: 8px; padding: 8px; background: #f0fff0; border-radius: 5px; cursor: pointer;">
                        <input type="radio" name="PatternOperator" value="is_bullish">
                        <span style="flex: 1;"><strong>Bullish Pattern</strong></span>
                        <span style="color: #28a745; font-size: 11px;">▲ Buy signal</span>
                    </label>
                    <label style="display: flex; align-items: center; gap: 8px; padding: 8px; background: #fff0f0; border-radius: 5px; cursor: pointer;">
                        <input type="radio" name="PatternOperator" value="is_bearish">
                        <span style="flex: 1;"><strong>Bearish Pattern</strong></span>
                        <span style="color: #dc3545; font-size: 11px;">▼ Sell signal</span>
                    </label>
                </div>
            </div>

            <!-- Value sub-panel -->
            <div id="subpanel_2" style="grid-column: 1 / span 2;">
                <label for="value"><b>Value:</b></label>
                <input id="value" name="value" type="number" value="100" style="margin-left: 10px; width: 100px;">
            </div>

            <!-- Comparison sub-panel -->
            <div id="subpanel_1" style="grid-column: 1 / span 2; display: none;">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                    <div>
                        <label for="sig2_source"><b style="display: inline-flex; width: 200px;">Signal Source:</b></label>
                        <select name="sig2_source" id="sig2_source" style="width: 100%; margin-top: 5px;" onchange="UI.signals.fill_prop('sig2_prop', this.value)">
                            <!-- Options populated by JavaScript -->
                        </select>
                    </div>
                    <div>
                        <label for="sig2_prop"><b style="display: inline-flex; width: 200px;">Property:</b></label>
                        <select id="sig2_prop" name="sig2_prop" style="width: 100%; margin-top: 5px;"></select>
                    </div>
                </div>
            </div>

            <!-- Buttons -->
            <div style="grid-column: 1 / span 2; text-align: center; margin-top: 10px;">
                <button type="button" class="btn" onclick="UI.signals.switch_panel('panel_2','panel_1')">Back</button>
                <button type="button" class="btn submit" onclick="UI.signals.ns_next(2)">Next</button>
            </div>
        </div><!-- End panel 2 -->

        <!-- Panel 3 of 3 -->
        <div id="panel_3" class="form_panels" style="display: none; grid-template-columns: 1fr 1fr; gap: 10px;">
            <!-- Display signal -->
            <span id="sig_display2" style="grid-column: 1 / span 2; padding: 10px; background: #f8f9fa; border-radius: 5px;"></span>

            <!-- Current values -->
            <div style="grid-column: 1 / span 2;">
                <b>Current values:</b>
                <span id="sig_realtime" style="margin-left: 10px;"></span>
            </div>

            <!-- Current evaluation -->
            <div style="grid-column: 1 / span 2;">
                <b>Currently evaluates to:</b>
                <span id="sig_eval" style="margin-left: 10px;"></span>
            </div>

            <!-- Buttons -->
            <div style="grid-column: 1 / span 2; text-align: center; margin-top: 10px;">
                <button type="button" class="btn" onclick="UI.signals.switch_panel('panel_3','panel_2')">Back</button>
                <button type="button" id="submit-create-signal" class="btn submit" onclick="UI.signals.submitSignal('new')">Create</button>
                <button type="button" id="submit-edit-signal" class="btn submit" style="display:none;" onclick="UI.signals.submitSignal('edit')">Save Changes</button>
            </div>
        </div><!-- End panel 3 -->
    </form>

    <!-- Resizer -->
    <div id="resize-signal" class="resize-handle"></div>
</div>
