<!-- AI Strategy Builder Dialog -->
<div class="form-popup" id="ai_strategy_form" style="display: none; overflow: hidden; position: absolute; width: 500px; height: 400px; border-radius: 10px; z-index: 1100;">

    <!-- Draggable Header Section -->
    <div class="dialog-header" id="ai_strategy_header">
        <h1>Generate Strategy with AI</h1>
        <button class="dialog-close-btn" onclick="UI.strats.closeAIDialog()">&times;</button>
    </div>

    <!-- Main Content -->
    <div class="form-container" style="padding: 15px; height: calc(100% - 60px); overflow-y: auto;">
        <div style="margin-bottom: 15px;">
            <label style="display: block; font-weight: bold; margin-bottom: 8px;">Describe your trading strategy:</label>
            <textarea id="ai_strategy_description" rows="8"
                placeholder="Example: Buy BTC when RSI drops below 30 and price is above 40000. Set a stop loss at 2% below entry and take profit at 5% above. Use a position size of 0.1 BTC."
                style="width: 100%; padding: 10px; border: 1px solid #444; border-radius: 5px; background: #2a2a2a; color: white; resize: vertical; font-size: 13px; box-sizing: border-box;"></textarea>
            <small style="color: #888; display: block; margin-top: 5px;">
                Tip: Be specific about entry/exit conditions, position sizes, and risk management (stop-loss, take-profit).
            </small>
        </div>

        <!-- Loading State -->
        <div id="ai_strategy_loading" style="display: none; text-align: center; padding: 20px;">
            <div class="spinner" style="border: 3px solid #444; border-top: 3px solid #3E3AF2; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 0 auto;"></div>
            <p style="margin-top: 10px; color: #888;">Generating strategy... This may take a moment.</p>
        </div>

        <!-- Error Display -->
        <div id="ai_strategy_error" style="display: none; color: #ff6b6b; padding: 10px; background: #2a2020; border-radius: 5px; margin-bottom: 10px;"></div>

        <!-- Buttons -->
        <div style="text-align: center; margin-top: 15px;">
            <button type="button" class="btn cancel" onclick="UI.strats.closeAIDialog()" style="margin-right: 10px;">Cancel</button>
            <button type="button" class="btn next" id="ai_generate_btn" onclick="UI.strats.generateWithAI()"
                    style="background: linear-gradient(135deg, #3E3AF2 0%, #6366f1 100%); border: none;">
                Generate Strategy
            </button>
        </div>
    </div>

    <!-- Resize Handle -->
    <div id="resize-ai-strategy" class="resize-handle"></div>
</div>

<!-- Spinner Animation -->
<style>
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#ai_strategy_form {
    background: #1e1e1e;
    border: 1px solid #444;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

#ai_strategy_form .btn.cancel {
    background: #444;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
}

#ai_strategy_form .btn.cancel:hover {
    background: #555;
}

#ai_strategy_form .btn.next {
    color: white;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
}

#ai_strategy_form .btn.next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
</style>
