<!-- Strategy Form Popup -->
<div class="form-popup" id="new_strat_form" style="display: none; overflow: hidden; position: absolute; width: 450px; height: 760px; border-radius: 10px;">

    <!-- Draggable Header Section -->
    <div class="dialog-header" id="draggable_header">
        <h1 id="form-header-create">Create New Strategy</h1>
        <h1 id="form-header-edit" style="display: none;">Edit Strategy</h1>
        <button class="dialog-close-btn" onclick="UI.strats.uiManager.hideForm()">&times;</button>
    </div>

    <!-- Main Content (Scrollable) -->
    <form class="form-container" style="display: grid; grid-template-columns: 1fr; grid-template-rows: auto; overflow-y: auto;">
        <!-- AI Strategy Builder Button -->
        <div style="grid-column: 1; text-align: center; margin: 10px 0;">
            <button type="button" id="ai-generate-btn" onclick="UI.strats.openAIDialog()"
                    style="background: linear-gradient(135deg, #3E3AF2 0%, #6366f1 100%);
                           color: white; border: none; padding: 8px 16px; border-radius: 5px;
                           cursor: pointer; font-size: 14px; font-weight: bold;">
                Generate with AI
            </button>
        </div>

        <!-- Blockly workspace -->
        <div id="blocklyDiv" style="grid-column: 1; height: 300px; width: 100%;"></div>

        <!-- Name of the strategy -->
        <div style="grid-column: 1;">
            <label for="name_box" style="display: inline-block; width: 20%;">Name:</label>
            <input class="ietextbox" type="text" id="name_box" name="name_box" value="Indicator name" style="width: 75%; display: inline-block;">
        </div>

        <!-- Public checkbox -->
        <div style="grid-column: 1;">
            <label for="public_checkbox" style="display: inline-block; width: 20%;">Public:</label>
            <input type="checkbox" id="public_checkbox" name="public_checkbox" style="display: inline-block;" onclick="UI.strats.uiManager.toggleFeeInput()">
        </div>

        <!-- Fee input field -->
        <div style="grid-column: 1; position: relative;">
            <label for="fee_box" style="display: inline-block; width: 20%;">Fee:</label>
            <input class="ietextbox" type="number" id="fee_box" name="fee_box" placeholder="10" step="1" min="1" max="100" value="10" style="width: 50px; display: inline-block;" disabled>
            <span style="display: inline-block; margin-left: 2px;">%</span>
            <span class="fee-info-icon" title="Fee is a percentage of the exchange's trading commission.
Example: If the exchange charges 0.1% commission on a $1000 trade ($1),
and you set fee to 50%, you earn $0.50 per profitable trade.
&#10;&#10;Set 1-100%. Only charged on profitable trades.">ⓘ</span>
        </div>

        <!-- Default Trading Source Section -->
        <div style="grid-column: 1; margin-top: 10px; padding: 10px; background: #f8f9fa; border-radius: 5px;">
            <label style="display: block; font-weight: bold; margin-bottom: 8px;">Default Trading Source:</label>
            <small style="display: block; color: #666; margin-bottom: 8px;">Strategy will trade on this market unless blocks specify otherwise</small>

            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;">
                <div>
                    <label for="strategy_exchange" style="font-size: 11px; display: block;">Exchange:</label>
                    <select id="strategy_exchange" name="strategy_exchange" style="width: 100%; padding: 4px; height: 28px; font-size: 13px; box-sizing: border-box;">
                        <option value="binance">Binance</option>
                        <option value="kucoin">KuCoin</option>
                        <option value="coinbase">Coinbase</option>
                        <option value="kraken">Kraken</option>
                        <option value="bybit">Bybit</option>
                        <option value="okx">OKX</option>
                        <option value="gemini">Gemini</option>
                        <option value="bitstamp">Bitstamp</option>
                    </select>
                </div>
                <div>
                    <label for="strategy_symbol" style="font-size: 11px; display: block;">Symbol:</label>
                    <select id="strategy_symbol" name="strategy_symbol" style="width: 100%; padding: 4px; height: 28px; font-size: 13px; box-sizing: border-box;">
                        <option value="BTC/USDT">BTC/USDT</option>
                        <option value="ETH/USDT">ETH/USDT</option>
                        <option value="BTC/USD">BTC/USD</option>
                        <option value="ETH/USD">ETH/USD</option>
                    </select>
                </div>
                <div>
                    <label for="strategy_timeframe" style="font-size: 11px; display: block;">Timeframe:</label>
                    <select id="strategy_timeframe" name="strategy_timeframe" style="width: 100%; padding: 4px; height: 28px; font-size: 13px; box-sizing: border-box;">
                        <option value="1m">1m</option>
                        <option value="5m" selected>5m</option>
                        <option value="15m">15m</option>
                        <option value="30m">30m</option>
                        <option value="1h">1h</option>
                        <option value="4h">4h</option>
                        <option value="1d">1d</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Buttons -->
        <div style="grid-column: 1; text-align: center;">
            <button type="button" class="btn cancel" onclick="UI.strats.uiManager.hideForm()">Close</button>
            <!-- Create Button -->
            <button id="submit-create" type="button" class="btn next" onclick="UI.strats.submitStrategy('new')">Create Strategy</button>
            <!-- Edit Button -->
            <button id="submit-edit" type="button" class="btn next" onclick="UI.strats.submitStrategy('edit')" style="display:none;">Edit Strategy</button>
        </div>
    </form>

    <!-- Add the missing resize handle here -->
    <div id="resize-strategy" class="resize-handle"></div>
</div>

<!-- Add CSS to hide scrollbars but allow scrolling and fix the resize handle -->
<style>
/* Hide scrollbars but still allow scrolling */
.form-popup {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

.form-popup::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
}

/* Style the draggable header section */
#draggable_header {
    cursor: move;
    padding: 10px;
    background-color: #3E3AF2;
    color: white;
    border-bottom: 1px solid #ccc;
    position: relative;
    z-index: 10;
}

/* Style the form container to be scrollable and take up remaining space */
.form-container {
    overflow-y: auto; /* Makes it scrollable */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

.form-container::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
}
/* Label and input field styling */
.form_panels label {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.ietextbox {
    width: 75%;
    display: inline-block;
}

/* Resize handle styling */
.resize-handle {
    width: 20px;
    height: 20px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: se-resize;
    z-index: 10;
    border-radius: 3px;
}

/* Fee info icon tooltip */
.fee-info-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #3E3AF2;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    line-height: 16px;
    cursor: help;
    margin-left: 5px;
    vertical-align: middle;
}

.fee-info-icon:hover {
    background: #0A07DF;
}

/* Native tooltip styling via title attribute - multiline support */
.fee-info-icon[title] {
    position: relative;
}
</style>


<!-- Advanced Toolbox -->
<xml id="toolbox_advanced" style="display: none">

  <!-- Indicators Category -->
  <category name="Indicators" colour="230" tooltip="Use your configured technical indicators in strategy logic">
    <!-- Indicator blocks will be added here -->
  </category>

  <!-- Signals Category -->
  <category name="Signals" colour="160" tooltip="Use your configured signals in strategy logic">
    <!-- Signal blocks will be added here dynamically -->
  </category>

  <!-- Formations Category -->
  <category name="Formations" colour="290" tooltip="Use chart formations (trendlines, channels) in strategy logic">
    <!-- Formation blocks will be added here dynamically -->
  </category>

  <!-- Balances Subcategory -->
  <category name="Balances" colour="#E69500" tooltip="Access strategy and account balance information">
    <label text="Track your trading capital"></label>
    <block type="starting_balance">
      <comment pinned="false" h="80" w="160">Retrieve the starting balance of the strategy.</comment>
    </block>
    <block type="current_balance">
      <comment pinned="false" h="80" w="160">Retrieve the current balance of the strategy.</comment>
    </block>
    <block type="available_balance">
      <comment pinned="false" h="80" w="160">Retrieve the overall available (liquid) balance of the user.</comment>
    </block>
    <block type="available_strategy_balance">
      <comment pinned="false" h="80" w="160">Retrieve the available balance allocated specifically to the strategy.</comment>
    </block>
    <block type="set_available_strategy_balance">
      <comment pinned="false" h="80" w="160">Set the balance allocated to the strategy.</comment>
    </block>
  </category>

  <!-- Order Metrics Subcategory -->
  <category name="Order Metrics" colour="#E69500" tooltip="Monitor order status, volume, and fill rates">
    <label text="Track your order performance"></label>
    <block type="order_volume">
      <comment pinned="false" h="80" w="160">Get the cumulative volume of filled or unfilled orders.</comment>
    </block>
    <block type="filled_orders">
      <comment pinned="false" h="80" w="160">Get the number of filled orders for this strategy.</comment>
    </block>
    <block type="unfilled_orders">
      <comment pinned="false" h="80" w="160">Get the number of unfilled orders for this strategy.</comment>
    </block>
    <block type="order_status">
      <comment pinned="false" h="80" w="160">Get the status of a named order.</comment>
    </block>
  </category>

  <!-- Trade Metrics Subcategory -->
  <category name="Trade Metrics" colour="#E69500" tooltip="Monitor active trades, P&L, and trade history">
    <label text="Track your trading activity"></label>
    <block type="active_trades">
      <comment pinned="false" h="80" w="160">Get the number of active trades currently open by the strategy.</comment>
    </block>
    <block type="total_trades">
      <comment pinned="false" h="80" w="160">Get the total number of trades executed by the strategy.</comment>
    </block>
    <block type="last_trade_details">
      <comment pinned="false" h="80" w="160">Retrieve details of the most recent trade executed by the strategy.</comment>
    </block>
    <block type="average_entry_price">
      <comment pinned="false" h="80" w="160">Retrieve the average entry price of all of this strategy's open positions.</comment>
    </block>
    <block type="unrealized_profit_loss">
      <comment pinned="false" h="80" w="160">Retrieve the unrealized profit or loss of this strategy's current positions.</comment>
    </block>
    <block type="user_active_trades">
      <comment pinned="false" h="80" w="160">Get the number of active trades across all strategies for the user.</comment>
    </block>
  </category>

  <!-- Time Metrics Subcategory -->
  <category name="Time Metrics" colour="#E69500" tooltip="Time-based conditions for your strategy">
    <label text="Use time in your logic"></label>
    <block type="time_since_start">
      <comment pinned="false" h="80" w="160">Get the time elapsed since the strategy started.</comment>
    </block>
  </category>

  <!-- Market Data Subcategory -->
  <category name="Market Data" colour="#E69500" tooltip="Access real-time prices and candle data">
    <label text="Get live market prices"></label>
    <block type="current_price">
      <comment pinned="false" h="80" w="160">Get the current market price of a specified symbol.</comment>
    </block>
    <block type="bid_price">
      <comment pinned="false" h="80" w="160">Retrieve the current bid price for a specified symbol.</comment>
    </block>
    <block type="ask_price">
      <comment pinned="false" h="80" w="160">Retrieve the current ask price for a specified symbol.</comment>
    </block>
    <block type="last_candle_value">
      <comment pinned="false" h="80" w="160">Retrieve a specific part (Open, High, Low, Close) of the last candle from a given source.</comment>
    </block>
    <block type="source">
      <comment pinned="false" h="80" w="160">Choose the data feed source for the value.</comment>
    </block>
  </category>

  <!-- Logical Blocks Category -->
  <category name="Logical" colour="#5C81A6" tooltip="Build conditions with comparisons and logic operators">
    <label text="Create conditional logic"></label>
    <block type="comparison">
      <comment pinned="false" h="80" w="160">Compare two values using operators like >, <, ==.</comment>
    </block>
    <block type="logical_and">
      <comment pinned="false" h="80" w="160">Logical AND of two conditions.</comment>
    </block>
    <block type="logical_or">
      <comment pinned="false" h="80" w="160">Logical OR of two conditions.</comment>
    </block>
    <block type="is_false">
      <comment pinned="false" h="80" w="160">Check if a condition is false.</comment>
    </block>
  </category>

  <!-- Trade Order Blocks Category -->
  <category name="Trade Order" colour="#3366CC" tooltip="Execute trades with stop-loss, take-profit, and limits">
    <label text="Place and manage orders"></label>
    <block type="trade_action">
      <comment pinned="false" h="80" w="160">Execute a Buy/Sell trade based on a condition with specified size and options.</comment>
    </block>
    <block type="time_in_force">
      <comment pinned="false" h="80" w="160">Set the time in force for the order (GTC, FOK, IOC).</comment>
    </block>
    <block type="stop_loss">
      <comment pinned="false" h="80" w="160">Set Stop Loss parameters for a trade.</comment>
    </block>
    <block type="trailing_stop">
      <comment pinned="false" h="80" w="160">Set a trailing stop to lock in profits as the price moves favorably.</comment>
    </block>
    <block type="take_profit">
      <comment pinned="false" h="80" w="160">Set Take Profit parameters for a trade.</comment>
    </block>
    <block type="limit">
      <comment pinned="false" h="80" w="160">Set Limit price for a trade order.</comment>
    </block>
    <block type="trailing_limit">
      <comment pinned="false" h="80" w="160">Set a trailing limit to ensure a limit purchase as the price moves favorably.</comment>
    </block>
    <block type="target_market">
      <comment pinned="false" h="80" w="160">Choose the target market for posting orders.</comment>
    </block>
    <block type="name_order">
      <comment pinned="false" h="80" w="160">Assign a custom name to the current order.</comment>
    </block>

  </category>

  <!-- Control Blocks Category -->
  <category name="Control" colour="#FF9E00" tooltip="Control strategy flow: pause, resume, exit, and schedule">
    <label text="Manage strategy execution"></label>
    <block type="pause_strategy">
      <comment pinned="false" h="80" w="160">Pause the strategy if the condition is true.</comment>
    </block>
    <block type="strategy_resume">
      <comment pinned="false" h="80" w="160">Resume the strategy if the condition is met.</comment>
    </block>
    <block type="strategy_exit">
      <comment pinned="false" h="80" w="160">Exit the strategy and close trades based on the condition.</comment>
    </block>
    <block type="max_drawdown">
      <comment pinned="false" h="80" w="160">Set a maximum drawdown limit to pause or exit the strategy.</comment>
    </block>
    <block type="schedule_action">
      <comment pinned="false" h="80" w="160">Schedule a specific action to be executed after a certain time interval.</comment>
    </block>
    <block type="execute_if">
      <comment pinned="false" h="80" w="160">Execute the enclosed statements if the condition is true.</comment>
    </block>
  </category>

  <!-- Values and flags Blocks Category -->
  <category name="Values and flags" colour="#6C8EBF" tooltip="Store values, set flags, and send notifications">
    <label text="Variables and state management"></label>
    <block type="notify_user">
      <comment pinned="false" h="80" w="160">Send a notification message to the user.</comment>
    </block>
    <block type="value_input">
      <comment pinned="false" h="80" w="160">Enter a numerical value. Chain multiple for a list.</comment>
    </block>
    <block type="get_variable">
      <comment pinned="false" h="80" w="160">Retrieve the value of a specified variable.</comment>
    </block>
    <block type="set_variable">
      <comment pinned="false" h="80" w="160">Set a variable to a specific value.</comment>
    </block>
    <block type="set_flag">
      <comment pinned="false" h="80" w="160">Set a flag to True or False based on a condition.</comment>
    </block>
    <block type="flag_is_set">
      <comment pinned="false" h="80" w="160">Check if a specified flag is set to True.</comment>
    </block>
  </category>

  <!-- Risk Management Category -->
  <category name="Risk Management" colour="#B22222" tooltip="Control leverage, margin, and position limits">
    <label text="Protect your capital"></label>
    <block type="set_leverage">
      <comment pinned="false" h="80" w="160">Define the leverage ratio for trades executed by the strategy.</comment>
    </block>
    <block type="current_margin">
      <comment pinned="false" h="80" w="160">Retrieve the current margin used by the strategy.</comment>
    </block>
    <block type="risk_ratio">
      <comment pinned="false" h="80" w="160">Calculate and retrieve the current risk ratio.</comment>
    </block>
    <block type="max_position_size">
      <comment pinned="false" h="80" w="160">Set a maximum limit on the number of positions the strategy can hold.</comment>
    </block>
  </category>

  <!-- Math Category -->
  <category name="Math" colour="#FFA500" tooltip="Arithmetic, statistics, and mathematical functions">
    <label text="Calculate and compute values"></label>
    <block type="math_operation">
      <comment pinned="false" h="80" w="160">Perform basic arithmetic operations between two values.</comment>
    </block>
    <block type="power">
      <comment pinned="false" h="80" w="160">Raise a number to the power of another number (x^y).</comment>
    </block>
    <block type="modulo">
      <comment pinned="false" h="80" w="160">Find the remainder after division of one number by another (x % y).</comment>
    </block>
    <block type="sqrt">
      <comment pinned="false" h="80" w="160">Calculate the square root of a number.</comment>
    </block>
    <block type="abs">
      <comment pinned="false" h="80" w="160">Get the absolute value of a number.</comment>
    </block>
    <block type="max">
      <comment pinned="false" h="80" w="160">Determine the maximum value among given numbers.</comment>
    </block>
    <block type="min">
      <comment pinned="false" h="80" w="160">Determine the minimum value among given numbers.</comment>
    </block>
    <block type="factorial">
      <comment pinned="false" h="80" w="160">Calculate the factorial of a number (x!).</comment>
    </block>
    <block type="log">
      <comment pinned="false" h="80" w="160">Calculate the logarithm of a number with base 10.</comment>
    </block>
    <block type="ln">
      <comment pinned="false" h="80" w="160">Calculate the natural logarithm (base e) of a number.</comment>
    </block>
    <block type="trig">
      <comment pinned="false" h="80" w="160">Calculate the sine/cos/tan of an angle (in radians).</comment>
    </block>
    <block type="mean">
      <comment pinned="false" h="80" w="160">Calculate the mean (average) of a list of numbers.</comment>
    </block>
    <block type="median">
      <comment pinned="false" h="80" w="160">Calculate the median of a list of numbers.</comment>
    </block>
    <block type="std_dev">
      <comment pinned="false" h="80" w="160">Calculate the standard deviation of a list of numbers.</comment>
    </block>
    <block type="round">
      <comment pinned="false" h="80" w="160">Round a number to the nearest integer or specified decimal places.</comment>
    </block>
    <block type="floor">
      <comment pinned="false" h="80" w="160">Round a number down to the nearest integer.</comment>
    </block>
    <block type="ceil">
      <comment pinned="false" h="80" w="160">Round a number up to the nearest integer.</comment>
    </block>
    <block type="random">
      <comment pinned="false" h="80" w="160">Generate a random number within a specified range.</comment>
    </block>
    <block type="clamp">
      <comment pinned="false" h="80" w="160">Restrict a number within a specified range.</comment>
    </block>
  </category>

</xml>







