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

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

    <!-- Main Content -->
    <div class="form-container" style="padding: 15px; overflow-y: auto; max-height: 450px;">
        <input type="hidden" id="edit_indicator_name">

        <!-- Indicator Name (readonly) -->
        <div style="margin-bottom: 15px;">
            <label><b>Name:</b></label>
            <input type="text" id="edit_ind_display_name" readonly style="width: 100%; margin-top: 5px; background: #f5f5f5;">
        </div>

        <!-- Indicator Type (readonly) -->
        <div style="margin-bottom: 15px;">
            <label><b>Type:</b></label>
            <input type="text" id="edit_ind_type" readonly style="width: 100%; margin-top: 5px; background: #f5f5f5;">
        </div>

        <!-- Visibility -->
        <div style="margin-bottom: 15px;">
            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                <input type="checkbox" id="edit_ind_visible">
                <span>Show on Chart</span>
            </label>
        </div>

        <!-- Source Settings -->
        <div style="margin-bottom: 15px;">
            <label><b>Data Source:</b></label>
            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 5px;">
                <div>
                    <label style="font-size: 12px;">Symbol</label>
                    <input type="text" id="edit_ind_market" style="width: 100%; margin-top: 3px;">
                </div>
                <div>
                    <label style="font-size: 12px;">Timeframe</label>
                    <input type="text" id="edit_ind_timeframe" style="width: 100%; margin-top: 3px;">
                </div>
                <div>
                    <label style="font-size: 12px;">Exchange</label>
                    <input type="text" id="edit_ind_exchange" style="width: 100%; margin-top: 3px;">
                </div>
            </div>
        </div>

        <!-- Dynamic Properties -->
        <div style="margin-bottom: 15px;">
            <label><b>Parameters:</b></label>
            <div id="edit_ind_properties" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 5px;">
                <!-- Properties will be dynamically inserted here -->
            </div>
        </div>

        <!-- Color Picker -->
        <div style="margin-bottom: 15px;">
            <label><b>Color:</b></label>
            <input type="color" id="edit_ind_color" style="width: 60px; height: 30px; margin-left: 10px; vertical-align: middle;">
        </div>

        <!-- Buttons -->
        <div style="text-align: center; margin-top: 15px;">
            <button class="btn cancel" onclick="UI.indicators.closeEditDialog()">Cancel</button>
            <button class="btn submit" onclick="UI.indicators.saveEditDialog()">Save Changes</button>
        </div>
    </div>
</div>
