<!-- Signal Type (External Source) Form Popup -->
<div class="form-popup" id="new_signal_type_form" style="display: none; overflow: hidden; position: absolute; width: 480px; height: 520px; border-radius: 10px;">

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

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

        <div style="display: grid; grid-template-columns: 1fr; gap: 12px;">

            <!-- Name Input -->
            <div>
                <label for="signal_type_name"><b>Name:</b></label>
                <input type="text" id="signal_type_name" name="signal_type_name"
                       placeholder="e.g., Fear & Greed Index"
                       style="width: 100%; margin-top: 5px; padding: 8px; border-radius: 4px; border: 1px solid #ccc;">
            </div>

            <!-- API Endpoint URL -->
            <div>
                <label for="signal_type_url"><b>API Endpoint URL:</b></label>
                <input type="text" id="signal_type_url" name="signal_type_url"
                       placeholder="https://pro-api.coinmarketcap.com/v3/fear-and-greed/latest"
                       style="width: 100%; margin-top: 5px; padding: 8px; border-radius: 4px; border: 1px solid #ccc;">
            </div>

            <!-- Authentication Section -->
            <div style="background: #f8f9fa; padding: 12px; border-radius: 6px; border: 1px solid #eee;">
                <label style="display: block; margin-bottom: 8px;"><b>Authentication (optional):</b></label>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                    <div>
                        <label for="signal_type_auth_header" style="font-size: 12px;">Header Name:</label>
                        <input type="text" id="signal_type_auth_header" name="signal_type_auth_header"
                               placeholder="X-CMC_PRO_API_KEY"
                               style="width: 100%; margin-top: 3px; padding: 6px; border-radius: 4px; border: 1px solid #ccc; font-size: 12px;">
                    </div>
                    <div>
                        <label for="signal_type_auth_key" style="font-size: 12px;">API Key:</label>
                        <input type="password" id="signal_type_auth_key" name="signal_type_auth_key"
                               placeholder="Your API key"
                               style="width: 100%; margin-top: 3px; padding: 6px; border-radius: 4px; border: 1px solid #ccc; font-size: 12px;">
                    </div>
                </div>
            </div>

            <!-- JSON Path -->
            <div>
                <label for="signal_type_json_path"><b>JSON Path to Value:</b></label>
                <input type="text" id="signal_type_json_path" name="signal_type_json_path"
                       value="$.data[0].value"
                       placeholder="$.data[0].value"
                       style="width: 100%; margin-top: 5px; padding: 8px; border-radius: 4px; border: 1px solid #ccc; font-family: monospace;">
                <small style="color: #666; display: block; margin-top: 4px;">
                    JSONPath expression to extract the value from the API response.
                    <a href="https://jsonpath.com/" target="_blank" style="color: #3E3AF2;">JSONPath reference</a>
                </small>
            </div>

            <!-- Refresh Interval -->
            <div>
                <label for="signal_type_refresh"><b>Refresh Interval:</b></label>
                <div style="display: flex; align-items: center; gap: 10px; margin-top: 5px;">
                    <input type="number" id="signal_type_refresh" name="signal_type_refresh"
                           value="300" min="60" max="86400"
                           style="width: 100px; padding: 8px; border-radius: 4px; border: 1px solid #ccc;">
                    <span>seconds</span>
                    <span style="color: #666; font-size: 12px;">(min: 60s, default: 300s = 5 min)</span>
                </div>
            </div>

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

            <!-- Loading indicator -->
            <div id="signal_type_loading" style="display: none; text-align: center; padding: 10px;">
                <div style="border: 3px solid #ddd; border-top: 3px solid #3E3AF2; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; margin: 0 auto;"></div>
                <span style="color: #666; font-size: 12px;">Testing API connection...</span>
            </div>

            <!-- Buttons -->
            <div style="text-align: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee;">
                <button type="button" class="btn cancel" onclick="UI.signals.closeSignalTypeForm()" style="margin-right: 10px;">
                    Cancel
                </button>
                <button type="button" class="btn" onclick="UI.signals.testSignalType()" style="margin-right: 10px; background: #17a2b8; color: white;">
                    Test Connection
                </button>
                <button type="button" class="btn submit" id="submit-signal-type" onclick="UI.signals.submitSignalType()">
                    Create
                </button>
            </div>
        </div>
    </form>

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

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

#signal_type_test_result.error {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid #dc3545;
    color: #dc3545;
}
</style>
