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

    <!-- Draggable Header Section -->
    <div class="dialog-header" id="indicator_draggable_header">
        <h1>Create New Indicator</h1>
        <button class="dialog-close-btn" onclick="UI.indicators.close_form()">&times;</button>
    </div>

    <!-- Main Content -->
    <div id="new_i_form" class="form-container" style="padding: 15px; overflow-y: auto;">
        <!-- Indicator Name -->
        <div style="margin-bottom: 10px;">
            <label for="newi_name"><b>Indicator Name:</b></label>
            <input type="text" id="newi_name" value="New Indicator" style="width: 100%; margin-top: 5px;">
        </div>

        <!-- Type selector with tooltip -->
        <div style="margin-bottom: 10px; position: relative;">
            <label for="newi_type"><b>Type:</b></label>
            <div class="indicator-type-wrapper" style="position: relative;">
                <input type="text" id="newi_type_search" placeholder="Search indicators..."
                       style="width: 100%; margin-top: 5px; padding: 8px; box-sizing: border-box;"
                       value="{% if indicator_types %}{{ indicator_types[0] }}{% endif %}"
                       onfocus="showIndicatorDropdown()" oninput="filterIndicatorTypes()">
                <input type="hidden" id="newi_type" value="{% if indicator_types %}{{ indicator_types[0] }}{% endif %}">

                <!-- Custom dropdown with categories -->
                <div id="indicator_dropdown" class="indicator-dropdown" style="display: none;">
                    <!-- Regular indicators -->
                    {% for i_type in indicator_types %}
                    {% if not i_type.startswith('CDL_') %}
                    <div class="indicator-option" data-value="{{i_type}}"
                         onmouseover="showIndicatorTooltip('{{i_type}}'); hidePatternSubmenu();"
                         onclick="selectIndicatorType('{{i_type}}')">
                        {{i_type}}
                    </div>
                    {% endif %}
                    {% endfor %}

                    <!-- Patterns category -->
                    <div id="patterns_category" class="indicator-category" onmouseover="showPatternSubmenu()" onmouseout="hidePatternSubmenuDelayed()">
                        <span onmouseover="showCategoryTooltip()">Patterns</span>
                        <span class="category-arrow">▶</span>
                    </div>
                </div>

            </div>
        </div>

        <!-- Properties display -->
        <div style="margin-bottom: 10px;">
            <span><b>Properties:</b> <span id="new_prop_list"></span></span>
        </div>

        <!-- Add property section -->
        <div id="add_prop_container" style="background: #f8f9fa; padding: 10px; border-radius: 5px; margin-bottom: 10px;">
            <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end;">
                <div>
                    <label for="new_prop_name" style="font-size: 11px;">Property Name:</label>
                    <input type="text" id="new_prop_name" name="new_prop_name" list="default_properties" value="name" onclick="this.value='';" style="width: 100%;">
                    <datalist id="default_properties">
                        <option value="period">
                        <option value="devup">
                        <option value="devdn">
                        <option value="ma">
                        <option value="fast_p">
                        <option value="slow_p">
                        <option value="signal_p">
                        <option value="color">
                        <option value="color_1">
                        <option value="color_2">
                        <option value="color_3">
                        <option value="bullish_color">
                        <option value="bearish_color">
                    </datalist>
                </div>
                <div>
                    <label for="new_prop_value" style="font-size: 11px;">Value:</label>
                    <input type="text" id="new_prop_value" name="new_prop_value" value="value" onclick="this.value='';" style="width: 100%;">
                </div>
                <button id="add_prop" type="button" style="color: darkgreen; padding: 5px 10px;" onclick="UI.indicators.add_to_list()">&#10009; Add</button>
            </div>
        </div>

        <!-- Trading pair, timeframe, exchange selectors -->
        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 15px;">
            <div>
                <label for="ei_symbol" style="font-size: 11px; display: block;">Trading Pair:</label>
                <input list="ei_symbols" id="ei_symbol" style="width: 100%; height: 28px; box-sizing: border-box;">
                <datalist id="ei_symbols">
                    {% for symbol in symbols %}
                    <option value="{{symbol}}"></option>
                    {% endfor %}
                </datalist>
            </div>
            <div>
                <label for="ei_timeframe" style="font-size: 11px; display: block;">Timeframe:</label>
                <select id="ei_timeframe" style="width: 100%; height: 28px;">
                    {% for time_frame in intervals %}
                    <option {% if time_frame == interval_state %} selected="selected" {% endif %}>{{ time_frame }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="ei_exchange_name" style="font-size: 11px; display: block;">Exchange:</label>
                <select id="ei_exchange_name" style="width: 100%; height: 28px;">
                    {% for exchange in exchanges %}
                    <option {% if exchange == selected_exchange %} selected="selected" {% endif %}>{{ exchange }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <input type="hidden" id="new_prop_obj" value="">

        <!-- Buttons -->
        <div style="text-align: center;">
            <button type="button" class="btn cancel" onclick="UI.indicators.close_form()">Close</button>
            <button type="button" class="btn submit" onclick="UI.indicators.submit_new_i()">Create Indicator</button>
        </div>
    </div>

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

<!-- Tooltip panel - placed outside dialog to avoid overflow clipping -->
<div id="indicator_tooltip" class="indicator-tooltip">
    <div id="tooltip_title" style="font-weight: bold; margin-bottom: 8px;"></div>
    <div id="tooltip_description" style="font-size: 12px; margin-bottom: 10px;"></div>
    <div id="tooltip_svg" style="text-align: center;"></div>
</div>

<!-- Patterns submenu - placed outside dropdown to avoid scroll issues -->
<div id="patterns_submenu" class="indicator-submenu" onmouseover="keepPatternSubmenuOpen()" onmouseout="hidePatternSubmenuDelayed()">
    {% for i_type in indicator_types %}
    {% if i_type.startswith('CDL_') %}
    <div class="indicator-option" data-value="{{i_type}}"
         onmouseover="showIndicatorTooltip('{{i_type}}')"
         onclick="selectIndicatorType('{{i_type}}')">
        {{i_type}}
    </div>
    {% endif %}
    {% endfor %}
</div>

<style>
.indicator-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000;
}

.indicator-option {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.indicator-option:hover {
    background-color: #3E3AF2;
    color: white;
}

.indicator-option:last-child {
    border-bottom: none;
}

.indicator-category {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background: #f8f8f8;
    font-weight: 500;
}

.indicator-category:hover {
    background-color: #3E3AF2;
    color: white;
}

.category-arrow {
    font-size: 10px;
    margin-left: 8px;
}

.indicator-submenu {
    display: none;
    position: fixed;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 10000;
}

.indicator-submenu .indicator-option {
    white-space: nowrap;
}

.indicator-tooltip {
    display: none;
    position: fixed;
    width: 280px;
    padding: 15px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 10001;
}

.indicator-tooltip::before {
    display: none;
}
</style>

<script>
// Indicator descriptions and SVGs
const indicatorInfo = {
    // Regular indicators
    'SMA': {
        description: 'Simple Moving Average - Calculates the average price over a specified period. Useful for identifying trends and support/resistance levels.',
        svg: null
    },
    'EMA': {
        description: 'Exponential Moving Average - Similar to SMA but gives more weight to recent prices, making it more responsive to new information.',
        svg: null
    },
    'RSI': {
        description: 'Relative Strength Index - Momentum oscillator measuring speed and magnitude of price changes. Values above 70 indicate overbought, below 30 oversold.',
        svg: null
    },
    'MACD': {
        description: 'Moving Average Convergence Divergence - Shows relationship between two EMAs. Used to identify trend direction, momentum, and potential reversals.',
        svg: null
    },
    'BOLBands': {
        description: 'Bollinger Bands - Volatility indicator with upper and lower bands around a moving average. Price touching bands may indicate overbought/oversold conditions.',
        svg: null
    },
    'BOL%B': {
        description: 'Bollinger %B - Shows where price is relative to the Bollinger Bands. Values above 1 = above upper band, below 0 = below lower band.',
        svg: null
    },
    'ATR': {
        description: 'Average True Range - Measures market volatility by calculating the average range between high and low prices over a period.',
        svg: null
    },
    'LREG': {
        description: 'Linear Regression - Projects future prices based on a linear trend line fitted to recent price data.',
        svg: null
    },
    'Volume': {
        description: 'Trading Volume - Shows the number of units traded. High volume confirms price moves, low volume suggests weak conviction.',
        svg: null
    },

    // Candlestick patterns - Single candle
    'CDL_DOJI': {
        description: 'Doji - Open and close are nearly equal, forming a cross shape. Indicates market indecision and potential reversal.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="10" x2="30" y2="70" stroke="#333" stroke-width="2"/>
            <line x1="20" y1="40" x2="40" y2="40" stroke="#333" stroke-width="3"/>
        </svg>`
    },
    'CDL_HAMMER': {
        description: 'Hammer - Small body at top with long lower shadow. Bullish reversal signal appearing after a downtrend.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="15" x2="30" y2="70" stroke="#333" stroke-width="2"/>
            <rect x="22" y="15" width="16" height="12" fill="#00C853" stroke="#333"/>
        </svg>`
    },
    'CDL_INVERTEDHAMMER': {
        description: 'Inverted Hammer - Small body at bottom with long upper shadow. Potential bullish reversal after downtrend.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="10" x2="30" y2="65" stroke="#333" stroke-width="2"/>
            <rect x="22" y="53" width="16" height="12" fill="#00C853" stroke="#333"/>
        </svg>`
    },
    'CDL_SHOOTINGSTAR': {
        description: 'Shooting Star - Small body at bottom with long upper shadow. Bearish reversal signal after an uptrend.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="10" x2="30" y2="65" stroke="#333" stroke-width="2"/>
            <rect x="22" y="53" width="16" height="12" fill="#FF5252" stroke="#333"/>
        </svg>`
    },
    'CDL_SPINNINGTOP': {
        description: 'Spinning Top - Small body with upper and lower shadows. Indicates indecision between buyers and sellers.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="10" x2="30" y2="70" stroke="#333" stroke-width="2"/>
            <rect x="22" y="32" width="16" height="16" fill="#888" stroke="#333"/>
        </svg>`
    },
    'CDL_MARUBOZU': {
        description: 'Marubozu - Long body with no shadows. Strong bullish (white) or bearish (black) conviction.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <rect x="20" y="10" width="20" height="60" fill="#00C853" stroke="#333" stroke-width="2"/>
        </svg>`
    },

    // Candlestick patterns - Two candle
    'CDL_ENGULFING': {
        description: 'Engulfing Pattern - Second candle completely engulfs the first. Bullish engulfing after downtrend, bearish after uptrend.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="12" y="30" width="14" height="25" fill="#FF5252" stroke="#333"/>
            <rect x="38" y="20" width="20" height="45" fill="#00C853" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_HARAMI': {
        description: 'Harami - Second candle is contained within the first. Suggests potential reversal, especially with confirmation.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="10" y="15" width="20" height="50" fill="#FF5252" stroke="#333" stroke-width="2"/>
            <rect x="42" y="30" width="12" height="20" fill="#00C853" stroke="#333"/>
        </svg>`
    },
    'CDL_PIERCING': {
        description: 'Piercing Line - Bullish pattern where second candle opens below prior low and closes above midpoint of first candle.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="12" y="15" width="16" height="40" fill="#FF5252" stroke="#333"/>
            <line x1="20" y1="55" x2="20" y2="65" stroke="#333" stroke-width="2"/>
            <rect x="42" y="25" width="16" height="40" fill="#00C853" stroke="#333"/>
            <line x1="50" y1="65" x2="50" y2="72" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_DARKCLOUDCOVER': {
        description: 'Dark Cloud Cover - Bearish pattern where second candle opens above prior high and closes below midpoint of first candle.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="12" y="25" width="16" height="40" fill="#00C853" stroke="#333"/>
            <line x1="20" y1="15" x2="20" y2="25" stroke="#333" stroke-width="2"/>
            <rect x="42" y="15" width="16" height="40" fill="#FF5252" stroke="#333"/>
            <line x1="50" y1="55" x2="50" y2="65" stroke="#333" stroke-width="2"/>
        </svg>`
    },

    // Candlestick patterns - Three+ candle
    'CDL_MORNINGSTAR': {
        description: 'Morning Star - Three-candle bullish reversal: large bearish, small body (star), large bullish. Strong reversal signal.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="15" width="14" height="40" fill="#FF5252" stroke="#333"/>
            <rect x="36" y="50" width="10" height="8" fill="#888" stroke="#333"/>
            <line x1="41" y1="45" x2="41" y2="50" stroke="#333" stroke-width="2"/>
            <line x1="41" y1="58" x2="41" y2="65" stroke="#333" stroke-width="2"/>
            <rect x="60" y="20" width="14" height="40" fill="#00C853" stroke="#333"/>
        </svg>`
    },
    'CDL_EVENINGSTAR': {
        description: 'Evening Star - Three-candle bearish reversal: large bullish, small body (star), large bearish. Strong reversal signal.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="25" width="14" height="40" fill="#00C853" stroke="#333"/>
            <rect x="36" y="12" width="10" height="8" fill="#888" stroke="#333"/>
            <line x1="41" y1="8" x2="41" y2="12" stroke="#333" stroke-width="2"/>
            <line x1="41" y1="20" x2="41" y2="28" stroke="#333" stroke-width="2"/>
            <rect x="60" y="15" width="14" height="40" fill="#FF5252" stroke="#333"/>
        </svg>`
    },
    'CDL_3WHITESOLDIERS': {
        description: 'Three White Soldiers - Three consecutive long bullish candles. Very strong bullish signal, but rare pattern.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="45" width="14" height="25" fill="#00C853" stroke="#333"/>
            <rect x="32" y="30" width="14" height="25" fill="#00C853" stroke="#333"/>
            <rect x="56" y="15" width="14" height="25" fill="#00C853" stroke="#333"/>
        </svg>`
    },
    'CDL_3BLACKCROWS': {
        description: 'Three Black Crows - Three consecutive long bearish candles. Very strong bearish signal, but rare pattern.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="10" width="14" height="25" fill="#FF5252" stroke="#333"/>
            <rect x="32" y="25" width="14" height="25" fill="#FF5252" stroke="#333"/>
            <rect x="56" y="40" width="14" height="25" fill="#FF5252" stroke="#333"/>
        </svg>`
    },
    'CDL_3INSIDE': {
        description: 'Three Inside Up/Down - Three-candle reversal pattern. Harami followed by confirmation candle in reversal direction.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="20" width="16" height="40" fill="#FF5252" stroke="#333"/>
            <rect x="34" y="30" width="10" height="15" fill="#00C853" stroke="#333"/>
            <rect x="56" y="15" width="14" height="35" fill="#00C853" stroke="#333"/>
        </svg>`
    },
    'CDL_2CROWS': {
        description: 'Two Crows - Bearish reversal with gap up followed by two bearish candles, second engulfing first.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="30" width="14" height="35" fill="#00C853" stroke="#333"/>
            <line x1="15" y1="25" x2="15" y2="30" stroke="#333" stroke-width="2"/>
            <rect x="32" y="12" width="12" height="15" fill="#FF5252" stroke="#333"/>
            <line x1="38" y1="27" x2="38" y2="32" stroke="#333" stroke-width="2"/>
            <rect x="54" y="8" width="16" height="25" fill="#FF5252" stroke="#333"/>
            <line x1="62" y1="33" x2="62" y2="40" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_3LINESTRIKE': {
        description: 'Three Line Strike - Three candles in trend direction followed by opposite candle that engulfs all three.',
        svg: `<svg width="120" height="80" viewBox="0 0 120 80">
            <rect x="5" y="45" width="12" height="22" fill="#00C853" stroke="#333"/>
            <rect x="22" y="35" width="12" height="22" fill="#00C853" stroke="#333"/>
            <rect x="39" y="25" width="12" height="22" fill="#00C853" stroke="#333"/>
            <rect x="56" y="20" width="16" height="55" fill="#FF5252" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_3OUTSIDE': {
        description: 'Three Outside Up/Down - Engulfing pattern confirmed by third candle continuing in reversal direction.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="25" width="12" height="30" fill="#FF5252" stroke="#333"/>
            <rect x="30" y="15" width="18" height="50" fill="#00C853" stroke="#333" stroke-width="2"/>
            <rect x="58" y="10" width="14" height="35" fill="#00C853" stroke="#333"/>
        </svg>`
    },
    'CDL_3STARSINSOUTH': {
        description: 'Three Stars in South - Rare bullish reversal with three decreasing bearish candles showing exhaustion.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="15" width="14" height="40" fill="#FF5252" stroke="#333"/>
            <line x1="15" y1="55" x2="15" y2="68" stroke="#333" stroke-width="2"/>
            <rect x="32" y="35" width="12" height="25" fill="#FF5252" stroke="#333"/>
            <line x1="38" y1="60" x2="38" y2="68" stroke="#333" stroke-width="2"/>
            <rect x="54" y="50" width="10" height="12" fill="#FF5252" stroke="#333"/>
            <line x1="59" y1="62" x2="59" y2="68" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_ABANDONEDBABY': {
        description: 'Abandoned Baby - Strong reversal with doji that gaps away from both surrounding candles.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="15" width="14" height="35" fill="#FF5252" stroke="#333"/>
            <line x1="15" y1="50" x2="15" y2="58" stroke="#333" stroke-width="2"/>
            <line x1="38" y1="62" x2="38" y2="75" stroke="#333" stroke-width="2"/>
            <line x1="32" y1="68" x2="44" y2="68" stroke="#333" stroke-width="3"/>
            <rect x="58" y="25" width="14" height="35" fill="#00C853" stroke="#333"/>
            <line x1="65" y1="18" x2="65" y2="25" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_ADVANCEBLOCK': {
        description: 'Advance Block - Three bullish candles with decreasing bodies showing weakening momentum.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="40" width="14" height="30" fill="#00C853" stroke="#333"/>
            <rect x="32" y="28" width="12" height="22" fill="#00C853" stroke="#333"/>
            <line x1="38" y1="22" x2="38" y2="28" stroke="#333" stroke-width="2"/>
            <rect x="54" y="18" width="10" height="15" fill="#00C853" stroke="#333"/>
            <line x1="59" y1="12" x2="59" y2="18" stroke="#333" stroke-width="2"/>
            <line x1="59" y1="33" x2="59" y2="38" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_BELTHOLD': {
        description: 'Belt Hold - Single candle opening at extreme (high/low) and closing near opposite end.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <rect x="20" y="10" width="20" height="55" fill="#00C853" stroke="#333" stroke-width="2"/>
            <line x1="30" y1="65" x2="30" y2="72" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_BREAKAWAY': {
        description: 'Breakaway - Five candle reversal starting with gap and ending with candle breaking the pattern.',
        svg: `<svg width="130" height="80" viewBox="0 0 130 80">
            <rect x="5" y="35" width="12" height="30" fill="#FF5252" stroke="#333"/>
            <rect x="22" y="18" width="10" height="12" fill="#FF5252" stroke="#333"/>
            <rect x="37" y="15" width="10" height="10" fill="#FF5252" stroke="#333"/>
            <rect x="52" y="12" width="10" height="12" fill="#FF5252" stroke="#333"/>
            <rect x="67" y="20" width="14" height="45" fill="#00C853" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_CLOSINGMARUBOZU': {
        description: 'Closing Marubozu - Marubozu with no shadow on closing end, showing strong conviction.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <rect x="20" y="10" width="20" height="55" fill="#00C853" stroke="#333" stroke-width="2"/>
            <line x1="30" y1="65" x2="30" y2="72" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_CONCEALBABYSWALL': {
        description: 'Concealing Baby Swallow - Rare four-candle bullish reversal pattern.',
        svg: `<svg width="120" height="80" viewBox="0 0 120 80">
            <rect x="5" y="10" width="12" height="35" fill="#FF5252" stroke="#333"/>
            <rect x="22" y="25" width="12" height="35" fill="#FF5252" stroke="#333"/>
            <rect x="39" y="40" width="10" height="20" fill="#FF5252" stroke="#333"/>
            <line x1="44" y1="60" x2="44" y2="68" stroke="#333" stroke-width="2"/>
            <rect x="54" y="15" width="14" height="55" fill="#FF5252" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_COUNTERATTACK': {
        description: 'Counter Attack - Two opposite-colored candles closing at the same price level.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="12" y="15" width="16" height="35" fill="#FF5252" stroke="#333"/>
            <line x1="20" y1="50" x2="20" y2="60" stroke="#333" stroke-width="2"/>
            <rect x="42" y="50" width="16" height="20" fill="#00C853" stroke="#333"/>
            <line x1="50" y1="40" x2="50" y2="50" stroke="#333" stroke-width="2"/>
            <line x1="8" y1="50" x2="72" y2="50" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
        </svg>`
    },
    'CDL_DOJISTAR': {
        description: 'Doji Star - Doji that gaps away from previous candle, indicating potential reversal.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="12" y="25" width="16" height="40" fill="#00C853" stroke="#333"/>
            <line x1="20" y1="18" x2="20" y2="25" stroke="#333" stroke-width="2"/>
            <line x1="50" y1="8" x2="50" y2="25" stroke="#333" stroke-width="2"/>
            <line x1="42" y1="12" x2="58" y2="12" stroke="#333" stroke-width="3"/>
        </svg>`
    },
    'CDL_DRAGONFLYDOJI': {
        description: 'Dragonfly Doji - Doji with long lower shadow and no upper shadow. Bullish signal.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="20" x2="30" y2="70" stroke="#333" stroke-width="2"/>
            <line x1="20" y1="20" x2="40" y2="20" stroke="#333" stroke-width="3"/>
        </svg>`
    },
    'CDL_EVENINGDOJISTAR': {
        description: 'Evening Doji Star - Bearish three-candle reversal with doji as the middle star.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="30" width="14" height="38" fill="#00C853" stroke="#333"/>
            <line x1="15" y1="25" x2="15" y2="30" stroke="#333" stroke-width="2"/>
            <line x1="41" y1="8" x2="41" y2="25" stroke="#333" stroke-width="2"/>
            <line x1="34" y1="12" x2="48" y2="12" stroke="#333" stroke-width="3"/>
            <rect x="60" y="18" width="14" height="38" fill="#FF5252" stroke="#333"/>
            <line x1="67" y1="56" x2="67" y2="65" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_GAPSIDESIDEWHITE': {
        description: 'Gap Side-by-Side White - Continuation pattern with gap and two similar bullish candles.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="35" width="14" height="30" fill="#00C853" stroke="#333"/>
            <line x1="15" y1="30" x2="15" y2="35" stroke="#333" stroke-width="2"/>
            <rect x="32" y="15" width="12" height="25" fill="#00C853" stroke="#333"/>
            <rect x="50" y="15" width="12" height="25" fill="#00C853" stroke="#333"/>
        </svg>`
    },
    'CDL_GRAVESTONEDOJI': {
        description: 'Gravestone Doji - Doji with long upper shadow and no lower shadow. Bearish signal.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="10" x2="30" y2="60" stroke="#333" stroke-width="2"/>
            <line x1="20" y1="60" x2="40" y2="60" stroke="#333" stroke-width="3"/>
        </svg>`
    },
    'CDL_HANGINGMAN': {
        description: 'Hanging Man - Hammer-shaped candle at top of uptrend. Bearish reversal signal.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="15" x2="30" y2="70" stroke="#333" stroke-width="2"/>
            <rect x="22" y="15" width="16" height="12" fill="#FF5252" stroke="#333"/>
        </svg>`
    },
    'CDL_HARAMICROSS': {
        description: 'Harami Cross - Harami pattern where the second candle is a doji.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="10" y="15" width="20" height="50" fill="#FF5252" stroke="#333" stroke-width="2"/>
            <line x1="50" y1="32" x2="50" y2="48" stroke="#333" stroke-width="2"/>
            <line x1="42" y1="40" x2="58" y2="40" stroke="#333" stroke-width="3"/>
        </svg>`
    },
    'CDL_HIGHWAVE': {
        description: 'High Wave - Candle with very long upper and lower shadows, showing extreme indecision.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="5" x2="30" y2="75" stroke="#333" stroke-width="2"/>
            <rect x="24" y="35" width="12" height="10" fill="#888" stroke="#333"/>
        </svg>`
    },
    'CDL_HIKKAKE': {
        description: 'Hikkake - Inside bar followed by false breakout and reversal.',
        svg: `<svg width="120" height="80" viewBox="0 0 120 80">
            <rect x="5" y="20" width="14" height="40" fill="#888" stroke="#333"/>
            <rect x="24" y="30" width="10" height="20" fill="#888" stroke="#333"/>
            <rect x="39" y="25" width="10" height="15" fill="#FF5252" stroke="#333"/>
            <rect x="54" y="35" width="12" height="30" fill="#00C853" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_HIKKAKEMOD': {
        description: 'Modified Hikkake - Hikkake variation with specific confirmation requirements.',
        svg: `<svg width="130" height="80" viewBox="0 0 130 80">
            <rect x="5" y="20" width="14" height="40" fill="#888" stroke="#333"/>
            <rect x="24" y="30" width="10" height="20" fill="#888" stroke="#333"/>
            <rect x="39" y="25" width="10" height="15" fill="#FF5252" stroke="#333"/>
            <rect x="54" y="28" width="10" height="12" fill="#888" stroke="#333"/>
            <rect x="69" y="35" width="12" height="30" fill="#00C853" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_HOMINGPIGEON': {
        description: 'Homing Pigeon - Bullish harami variant where both candles are bearish.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="10" y="15" width="18" height="45" fill="#FF5252" stroke="#333" stroke-width="2"/>
            <rect x="42" y="28" width="12" height="22" fill="#FF5252" stroke="#333"/>
        </svg>`
    },
    'CDL_IDENTICAL3CROWS': {
        description: 'Identical Three Crows - Three bearish candles each opening at previous close.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="10" width="14" height="20" fill="#FF5252" stroke="#333"/>
            <rect x="32" y="30" width="14" height="20" fill="#FF5252" stroke="#333"/>
            <rect x="56" y="50" width="14" height="20" fill="#FF5252" stroke="#333"/>
            <line x1="8" y1="30" x2="32" y2="30" stroke="#888" stroke-width="1" stroke-dasharray="2,2"/>
            <line x1="32" y1="50" x2="56" y2="50" stroke="#888" stroke-width="1" stroke-dasharray="2,2"/>
        </svg>`
    },
    'CDL_INNECK': {
        description: 'In-Neck - Bearish continuation where second candle closes just at first candle low.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="12" y="15" width="16" height="40" fill="#FF5252" stroke="#333"/>
            <line x1="20" y1="55" x2="20" y2="65" stroke="#333" stroke-width="2"/>
            <rect x="42" y="50" width="14" height="15" fill="#00C853" stroke="#333"/>
            <line x1="49" y1="40" x2="49" y2="50" stroke="#333" stroke-width="2"/>
            <line x1="8" y1="55" x2="72" y2="55" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
        </svg>`
    },
    'CDL_KICKING': {
        description: 'Kicking - Two marubozu candles of opposite color with gap between them.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="10" y="35" width="18" height="35" fill="#FF5252" stroke="#333" stroke-width="2"/>
            <rect x="42" y="10" width="18" height="35" fill="#00C853" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_KICKINGBYLENGTH': {
        description: 'Kicking By Length - Kicking pattern where direction is determined by longer marubozu.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="10" y="40" width="16" height="28" fill="#FF5252" stroke="#333"/>
            <rect x="42" y="10" width="20" height="42" fill="#00C853" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_LADDERBOTTOM': {
        description: 'Ladder Bottom - Five-candle bullish reversal at end of downtrend.',
        svg: `<svg width="130" height="80" viewBox="0 0 130 80">
            <rect x="5" y="10" width="12" height="18" fill="#FF5252" stroke="#333"/>
            <rect x="22" y="22" width="12" height="18" fill="#FF5252" stroke="#333"/>
            <rect x="39" y="34" width="12" height="18" fill="#FF5252" stroke="#333"/>
            <rect x="56" y="46" width="12" height="18" fill="#FF5252" stroke="#333"/>
            <rect x="73" y="30" width="14" height="35" fill="#00C853" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_LONGLEGGEDDOJI': {
        description: 'Long-Legged Doji - Doji with very long shadows both above and below.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="5" x2="30" y2="75" stroke="#333" stroke-width="2"/>
            <line x1="20" y1="40" x2="40" y2="40" stroke="#333" stroke-width="3"/>
        </svg>`
    },
    'CDL_LONGLINE': {
        description: 'Long Line Candle - Candle with unusually long body relative to recent candles.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <rect x="20" y="8" width="20" height="60" fill="#00C853" stroke="#333" stroke-width="2"/>
            <line x1="30" y1="68" x2="30" y2="74" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_MATCHINGLOW': {
        description: 'Matching Low - Two candles with identical lows, potential support/reversal.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="12" y="20" width="16" height="35" fill="#FF5252" stroke="#333"/>
            <line x1="20" y1="55" x2="20" y2="65" stroke="#333" stroke-width="2"/>
            <rect x="42" y="30" width="16" height="25" fill="#FF5252" stroke="#333"/>
            <line x1="50" y1="55" x2="50" y2="65" stroke="#333" stroke-width="2"/>
            <line x1="8" y1="55" x2="72" y2="55" stroke="#00C853" stroke-width="2" stroke-dasharray="4,2"/>
        </svg>`
    },
    'CDL_MATHOLD': {
        description: 'Mat Hold - Five-candle bullish continuation with small retracement.',
        svg: `<svg width="130" height="80" viewBox="0 0 130 80">
            <rect x="5" y="40" width="14" height="30" fill="#00C853" stroke="#333" stroke-width="2"/>
            <rect x="24" y="32" width="10" height="12" fill="#FF5252" stroke="#333"/>
            <rect x="39" y="28" width="10" height="12" fill="#FF5252" stroke="#333"/>
            <rect x="54" y="30" width="10" height="12" fill="#FF5252" stroke="#333"/>
            <rect x="69" y="18" width="14" height="35" fill="#00C853" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_MORNINGDOJISTAR': {
        description: 'Morning Doji Star - Bullish three-candle reversal with doji as the middle star.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="15" width="14" height="38" fill="#FF5252" stroke="#333"/>
            <line x1="15" y1="53" x2="15" y2="60" stroke="#333" stroke-width="2"/>
            <line x1="41" y1="58" x2="41" y2="72" stroke="#333" stroke-width="2"/>
            <line x1="34" y1="65" x2="48" y2="65" stroke="#333" stroke-width="3"/>
            <rect x="60" y="25" width="14" height="38" fill="#00C853" stroke="#333"/>
            <line x1="67" y1="18" x2="67" y2="25" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_ONNECK': {
        description: 'On-Neck - Bearish continuation where second candle closes exactly at first candle low.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="12" y="15" width="16" height="40" fill="#FF5252" stroke="#333"/>
            <line x1="20" y1="55" x2="20" y2="65" stroke="#333" stroke-width="2"/>
            <rect x="42" y="52" width="14" height="13" fill="#00C853" stroke="#333"/>
            <line x1="49" y1="42" x2="49" y2="52" stroke="#333" stroke-width="2"/>
            <line x1="8" y1="55" x2="72" y2="55" stroke="#FF5252" stroke-width="2" stroke-dasharray="4,2"/>
        </svg>`
    },
    'CDL_RICKSHAWMAN': {
        description: 'Rickshaw Man - Long-legged doji with open and close at the center.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="5" x2="30" y2="75" stroke="#333" stroke-width="2"/>
            <line x1="18" y1="40" x2="42" y2="40" stroke="#333" stroke-width="4"/>
        </svg>`
    },
    'CDL_RISEFALL3METHODS': {
        description: 'Rising/Falling Three Methods - Five-candle continuation with small retracement candles.',
        svg: `<svg width="130" height="80" viewBox="0 0 130 80">
            <rect x="5" y="35" width="16" height="35" fill="#00C853" stroke="#333" stroke-width="2"/>
            <rect x="26" y="30" width="10" height="15" fill="#FF5252" stroke="#333"/>
            <rect x="41" y="32" width="10" height="15" fill="#FF5252" stroke="#333"/>
            <rect x="56" y="35" width="10" height="15" fill="#FF5252" stroke="#333"/>
            <rect x="71" y="15" width="16" height="40" fill="#00C853" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_SEPARATINGLINES': {
        description: 'Separating Lines - Continuation with opposite-colored candle opening at same price.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="12" y="30" width="16" height="35" fill="#FF5252" stroke="#333"/>
            <rect x="42" y="30" width="16" height="35" fill="#00C853" stroke="#333"/>
            <line x1="8" y1="30" x2="72" y2="30" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
        </svg>`
    },
    'CDL_SHORTLINE': {
        description: 'Short Line Candle - Candle with unusually short body relative to recent candles.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="25" x2="30" y2="55" stroke="#333" stroke-width="2"/>
            <rect x="22" y="36" width="16" height="8" fill="#888" stroke="#333"/>
        </svg>`
    },
    'CDL_STALLEDPATTERN': {
        description: 'Stalled Pattern - Three bullish candles where third shows exhaustion (small body at top).',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="45" width="14" height="25" fill="#00C853" stroke="#333"/>
            <rect x="32" y="30" width="14" height="25" fill="#00C853" stroke="#333"/>
            <rect x="56" y="22" width="12" height="10" fill="#00C853" stroke="#333"/>
            <line x1="62" y1="15" x2="62" y2="22" stroke="#333" stroke-width="2"/>
            <line x1="62" y1="32" x2="62" y2="40" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_STICKSANDWICH': {
        description: 'Stick Sandwich - Two candles with matching closes sandwiching an opposite candle.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="25" width="14" height="30" fill="#FF5252" stroke="#333"/>
            <rect x="32" y="15" width="14" height="30" fill="#00C853" stroke="#333"/>
            <rect x="56" y="25" width="14" height="30" fill="#FF5252" stroke="#333"/>
            <line x1="4" y1="55" x2="75" y2="55" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
        </svg>`
    },
    'CDL_TAKURI': {
        description: 'Takuri - Dragonfly doji variant with very long lower shadow, strong bullish signal.',
        svg: `<svg width="60" height="80" viewBox="0 0 60 80">
            <line x1="30" y1="15" x2="30" y2="72" stroke="#333" stroke-width="2"/>
            <rect x="24" y="15" width="12" height="6" fill="#00C853" stroke="#333"/>
        </svg>`
    },
    'CDL_TASUKIGAP': {
        description: 'Tasuki Gap - Gap continuation pattern where third candle partially fills the gap.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="40" width="14" height="28" fill="#00C853" stroke="#333"/>
            <rect x="32" y="15" width="14" height="25" fill="#00C853" stroke="#333"/>
            <rect x="56" y="28" width="14" height="22" fill="#FF5252" stroke="#333"/>
            <line x1="4" y1="40" x2="75" y2="40" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
        </svg>`
    },
    'CDL_THRUSTING': {
        description: 'Thrusting - Bearish continuation similar to in-neck but closing slightly higher.',
        svg: `<svg width="80" height="80" viewBox="0 0 80 80">
            <rect x="12" y="15" width="16" height="40" fill="#FF5252" stroke="#333"/>
            <line x1="20" y1="55" x2="20" y2="65" stroke="#333" stroke-width="2"/>
            <rect x="42" y="45" width="14" height="18" fill="#00C853" stroke="#333"/>
            <line x1="49" y1="38" x2="49" y2="45" stroke="#333" stroke-width="2"/>
            <line x1="8" y1="35" x2="72" y2="35" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
        </svg>`
    },
    'CDL_TRISTAR': {
        description: 'Tri-Star - Three consecutive doji candles signaling major reversal.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <line x1="18" y1="25" x2="18" y2="55" stroke="#333" stroke-width="2"/>
            <line x1="10" y1="40" x2="26" y2="40" stroke="#333" stroke-width="3"/>
            <line x1="45" y1="18" x2="45" y2="45" stroke="#333" stroke-width="2"/>
            <line x1="37" y1="32" x2="53" y2="32" stroke="#333" stroke-width="3"/>
            <line x1="72" y1="22" x2="72" y2="52" stroke="#333" stroke-width="2"/>
            <line x1="64" y1="37" x2="80" y2="37" stroke="#333" stroke-width="3"/>
        </svg>`
    },
    'CDL_UNIQUE3RIVER': {
        description: 'Unique Three River - Rare bullish reversal with three specific candle formations.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="15" width="14" height="40" fill="#FF5252" stroke="#333"/>
            <line x1="15" y1="55" x2="15" y2="65" stroke="#333" stroke-width="2"/>
            <rect x="32" y="38" width="12" height="20" fill="#FF5252" stroke="#333"/>
            <line x1="38" y1="58" x2="38" y2="68" stroke="#333" stroke-width="2"/>
            <rect x="54" y="32" width="12" height="12" fill="#00C853" stroke="#333"/>
        </svg>`
    },
    'CDL_UPSIDEGAP2CROWS': {
        description: 'Upside Gap Two Crows - Bearish reversal with gap up followed by two engulfing bearish candles.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="35" width="14" height="35" fill="#00C853" stroke="#333"/>
            <line x1="15" y1="28" x2="15" y2="35" stroke="#333" stroke-width="2"/>
            <rect x="32" y="15" width="12" height="15" fill="#FF5252" stroke="#333"/>
            <rect x="54" y="12" width="16" height="25" fill="#FF5252" stroke="#333" stroke-width="2"/>
        </svg>`
    },
    'CDL_XSIDEGAP3METHODS': {
        description: 'Side Gap Three Methods - Continuation pattern with gap being filled by third candle.',
        svg: `<svg width="100" height="80" viewBox="0 0 100 80">
            <rect x="8" y="25" width="14" height="30" fill="#00C853" stroke="#333"/>
            <rect x="32" y="10" width="14" height="25" fill="#00C853" stroke="#333"/>
            <rect x="56" y="18" width="14" height="32" fill="#FF5252" stroke="#333"/>
            <line x1="4" y1="25" x2="75" y2="25" stroke="#888" stroke-width="1" stroke-dasharray="3,3"/>
        </svg>`
    }
};

let submenuTimeout = null;

function showIndicatorDropdown() {
    document.getElementById('indicator_dropdown').style.display = 'block';
    // Don't show tooltip until hovering over an option
}

function hideIndicatorDropdown() {
    setTimeout(() => {
        document.getElementById('indicator_dropdown').style.display = 'none';
        document.getElementById('indicator_tooltip').style.display = 'none';
        hidePatternSubmenu();
    }, 200);
}

function showPatternSubmenu() {
    if (submenuTimeout) {
        clearTimeout(submenuTimeout);
        submenuTimeout = null;
    }

    const category = document.getElementById('patterns_category');
    const submenu = document.getElementById('patterns_submenu');
    const categoryRect = category.getBoundingClientRect();

    // Position submenu to the right of the category
    submenu.style.display = 'block';
    submenu.style.left = (categoryRect.right + 2) + 'px';
    submenu.style.top = categoryRect.top + 'px';

    // If submenu would go off right edge, position to the left instead
    const submenuWidth = submenu.offsetWidth;
    if (categoryRect.right + 2 + submenuWidth > window.innerWidth) {
        submenu.style.left = (categoryRect.left - submenuWidth - 2) + 'px';
    }

    // If submenu would go off bottom, adjust top
    const submenuHeight = submenu.offsetHeight;
    if (categoryRect.top + submenuHeight > window.innerHeight) {
        submenu.style.top = (window.innerHeight - submenuHeight - 10) + 'px';
    }
}

function keepPatternSubmenuOpen() {
    if (submenuTimeout) {
        clearTimeout(submenuTimeout);
        submenuTimeout = null;
    }
}

function showCategoryTooltip() {
    const tooltip = document.getElementById('indicator_tooltip');
    const title = document.getElementById('tooltip_title');
    const desc = document.getElementById('tooltip_description');
    const svg = document.getElementById('tooltip_svg');
    const submenu = document.getElementById('patterns_submenu');

    title.textContent = 'Candlestick Patterns';
    desc.textContent = 'Technical analysis patterns based on candlestick formations. These patterns can signal potential reversals or continuations in price trends. Hover over a pattern to see its description and visual representation.';
    svg.innerHTML = '';

    // Position tooltip to the right of the submenu
    const submenuRect = submenu.getBoundingClientRect();
    tooltip.style.display = 'block';
    tooltip.style.position = 'fixed';
    tooltip.style.left = (submenuRect.right + 10) + 'px';
    tooltip.style.top = submenuRect.top + 'px';

    const tooltipWidth = 280;
    if (submenuRect.right + 10 + tooltipWidth > window.innerWidth) {
        tooltip.style.left = (submenuRect.left - tooltipWidth - 10) + 'px';
    }
}

function hidePatternSubmenu() {
    document.getElementById('patterns_submenu').style.display = 'none';
}

function hidePatternSubmenuDelayed() {
    submenuTimeout = setTimeout(() => {
        hidePatternSubmenu();
    }, 100);
}

function filterIndicatorTypes() {
    const search = document.getElementById('newi_type_search').value.toLowerCase();
    const dropdown = document.getElementById('indicator_dropdown');
    const options = dropdown.querySelectorAll('.indicator-option');
    const category = dropdown.querySelector('.indicator-category');
    const submenuOptions = document.querySelectorAll('#patterns_submenu .indicator-option');

    let hasRegularMatch = false;
    let hasPatternMatch = false;

    // Filter regular indicators
    options.forEach(opt => {
        if (!opt.closest('.indicator-submenu')) {
            const text = opt.textContent.toLowerCase();
            const matches = text.includes(search);
            opt.style.display = matches ? 'block' : 'none';
            if (matches) hasRegularMatch = true;
        }
    });

    // Filter pattern indicators and check if any match
    submenuOptions.forEach(opt => {
        const text = opt.textContent.toLowerCase();
        const matches = text.includes(search);
        opt.style.display = matches ? 'block' : 'none';
        if (matches) hasPatternMatch = true;
    });

    // Show/hide the Patterns category based on search
    if (category) {
        if (search === '') {
            // No search - show category normally
            category.style.display = 'flex';
            hidePatternSubmenu();
        } else if (hasPatternMatch) {
            // Search matches patterns - show category and expand submenu
            category.style.display = 'flex';
            document.getElementById('patterns_submenu').style.display = 'block';
        } else {
            // No pattern matches - hide category
            category.style.display = 'none';
        }
    }
}

function selectIndicatorType(type) {
    document.getElementById('newi_type').value = type;
    document.getElementById('newi_type_search').value = type;
    document.getElementById('indicator_dropdown').style.display = 'none';
    document.getElementById('indicator_tooltip').style.display = 'none';
}

function showIndicatorTooltip(type) {
    // Clear any pending submenu hide
    if (submenuTimeout) {
        clearTimeout(submenuTimeout);
        submenuTimeout = null;
    }

    const info = indicatorInfo[type];
    const tooltip = document.getElementById('indicator_tooltip');
    const title = document.getElementById('tooltip_title');
    const desc = document.getElementById('tooltip_description');
    const svg = document.getElementById('tooltip_svg');

    if (info) {
        title.textContent = type;
        desc.textContent = info.description;
        svg.innerHTML = info.svg || '';
    } else {
        title.textContent = type;
        desc.textContent = 'No description available.';
        svg.innerHTML = '';
    }

    // Determine which element to position relative to
    let referenceElement;
    if (type.startsWith('CDL_')) {
        // For pattern indicators, position relative to submenu
        referenceElement = document.getElementById('patterns_submenu');
    } else {
        // For regular indicators, position relative to dropdown
        referenceElement = document.getElementById('indicator_dropdown');
    }

    const refRect = referenceElement.getBoundingClientRect();

    // Position tooltip to the right of the reference element
    tooltip.style.display = 'block';
    tooltip.style.position = 'fixed';
    tooltip.style.left = (refRect.right + 10) + 'px';
    tooltip.style.top = refRect.top + 'px';

    // If tooltip would go off right edge of screen, put it to the left instead
    const tooltipWidth = 280; // matches CSS width
    if (refRect.right + 10 + tooltipWidth > window.innerWidth) {
        tooltip.style.left = (refRect.left - tooltipWidth - 10) + 'px';
    }
}

// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
    const wrapper = document.querySelector('.indicator-type-wrapper');
    const submenu = document.getElementById('patterns_submenu');
    if (wrapper && !wrapper.contains(e.target) && !submenu.contains(e.target)) {
        document.getElementById('indicator_dropdown').style.display = 'none';
        document.getElementById('indicator_tooltip').style.display = 'none';
        document.getElementById('patterns_submenu').style.display = 'none';
    }
});
</script>
