<!-- External Indicator Dialog -->
<div class="form-popup" id="external_indicator_form" style="display: none; overflow: hidden; position: absolute; width: 500px; border-radius: 10px;">

    <!-- Draggable Header Section -->
    <div class="dialog-header" id="external_indicator_header">
        <h1>Add External Indicator</h1>
        <button class="dialog-close-btn" onclick="UI.signals.closeExternalIndicatorForm()">&times;</button>
    </div>

    <!-- Main Content -->
    <div class="form-container" style="padding: 15px; overflow-y: auto; max-height: 500px;">
        <p style="color: #888; font-size: 12px; margin-bottom: 15px;">
            Configure an external API that provides historical data for backtesting.
        </p>

        <!-- Name -->
        <div style="margin-bottom: 12px;">
            <label><b>Indicator Name:</b></label>
            <input type="text" id="ext_ind_name" placeholder="e.g., Fear & Greed Index" required
                   style="width: 100%; margin-top: 5px;">
        </div>

        <!-- Historical URL -->
        <div style="margin-bottom: 12px;">
            <label><b>Historical Data URL:</b></label>
            <input type="text" id="ext_ind_url"
                   placeholder="https://api.example.com/data?start={start_date}&limit={limit}" required
                   style="width: 100%; margin-top: 5px;">
            <p style="color: #666; font-size: 11px; margin: 5px 0 0 0;">
                Use placeholders: <code>{start_date}</code>, <code>{end_date}</code>, <code>{limit}</code>
            </p>
        </div>

        <!-- Auth Header -->
        <div style="margin-bottom: 12px;">
            <label><b>Auth Header Name:</b> <span style="font-weight: normal; color: #888;">(optional)</span></label>
            <input type="text" id="ext_ind_auth_header" placeholder="e.g., X-CMC_PRO_API_KEY"
                   style="width: 100%; margin-top: 5px;">
        </div>

        <!-- API Key -->
        <div style="margin-bottom: 12px;">
            <label><b>API Key:</b> <span style="font-weight: normal; color: #888;">(optional)</span></label>
            <input type="password" id="ext_ind_auth_key" placeholder="Your API key"
                   style="width: 100%; margin-top: 5px;">
        </div>

        <!-- JSONPath for Values -->
        <div style="margin-bottom: 12px;">
            <label><b>Value JSONPath:</b></label>
            <input type="text" id="ext_ind_value_jsonpath" value="$.data[*].value" required
                   style="width: 100%; margin-top: 5px;">
            <p style="color: #666; font-size: 11px; margin: 5px 0 0 0;">
                JSONPath expression to extract array of numeric values
            </p>
        </div>

        <!-- JSONPath for Timestamps -->
        <div style="margin-bottom: 12px;">
            <label><b>Timestamp JSONPath:</b></label>
            <input type="text" id="ext_ind_timestamp_jsonpath" value="$.data[*].timestamp" required
                   style="width: 100%; margin-top: 5px;">
            <p style="color: #666; font-size: 11px; margin: 5px 0 0 0;">
                JSONPath expression to extract array of timestamps
            </p>
        </div>

        <!-- Date Format in Response -->
        <div style="margin-bottom: 12px;">
            <label><b>Timestamp Format in Response:</b></label>
            <select id="ext_ind_date_format" style="width: 100%; margin-top: 5px;">
                <option value="ISO">ISO (2024-01-15 or 2024-01-15T12:00:00Z)</option>
                <option value="UNIX">Unix Timestamp (seconds or milliseconds)</option>
            </select>
        </div>

        <!-- Date Format for URL Parameters -->
        <div style="margin-bottom: 12px;">
            <label><b>Date Format for URL Parameters:</b></label>
            <select id="ext_ind_date_param_format" style="width: 100%; margin-top: 5px;">
                <option value="ISO">ISO (2024-01-15)</option>
                <option value="UNIX">Unix Timestamp</option>
            </select>
        </div>

        <!-- Test Result Area -->
        <div id="ext_ind_test_result" style="display: none; padding: 10px; border-radius: 5px; margin-bottom: 15px;">
        </div>

        <!-- Loading indicator -->
        <div id="ext_ind_loading" style="display: none; text-align: center; padding: 10px;">
            <span>Testing API...</span>
        </div>

        <!-- Buttons -->
        <div style="text-align: center; margin-top: 15px;">
            <button type="button" class="btn" onclick="UI.signals.testExternalIndicator()"
                    style="background: #17a2b8;">Test Connection</button>
            <button type="button" class="btn submit" onclick="UI.signals.submitExternalIndicator()">Save Indicator</button>
            <button type="button" class="btn cancel" onclick="UI.signals.closeExternalIndicatorForm()">Cancel</button>
        </div>
    </div>
</div>

<style>
    #ext_ind_test_result.success {
        background: rgba(40, 167, 69, 0.1);
        border: 1px solid #28a745;
        color: #28a745;
    }

    #ext_ind_test_result.error {
        background: rgba(220, 53, 69, 0.1);
        border: 1px solid #dc3545;
        color: #dc3545;
    }

    #external_indicator_form code {
        background: #e9ecef;
        padding: 2px 5px;
        border-radius: 3px;
        font-family: monospace;
    }
</style>
