<div class="content" id="indicator_panel">
    <!-- Indicator Panel Section -->

    <div id="edit_indcr_panel" style="display: grid; grid-template-columns: 1fr 1fr;">
        <!-- Button for adding a new indicator -->
        <div class="section" style="grid-column: 1;">
            <button class="btn" onclick="UI.indicators.open_form()">New Indicator</button>
        </div>
        <!-- Button for displaying indicator options -->
        <div class="section" style="grid-column: 2;">
            <button class="btn">Indicator Options</button>
        </div>
    </div>

    <!-- Indicator list display section -->
    <div class="section" style="margin-top: 15px; overflow-x: auto; display: grid; grid-auto-rows: minmax(80px, auto); grid-template-columns: 75px 200px 100px 150px 150px 75px 100px 100px auto; gap: 10px; padding-left: 10px;">
        <div style="background-color: #F7E1C1; grid-column: 1 / span 9; padding: 5px 0; display: grid; grid-template-columns: 75px 200px 100px 150px 150px 75px 100px 100px auto; gap: 10px;">
            <div style="text-align: center;"><h3 class="header-text">Remove or Edit</h3></div>
            <div style="text-align: center;"><h3 class="header-text">Name</h3></div>
            <div style="text-align: center;"><h3 class="header-text">Value</h3></div>
            <div style="text-align: center;"><h3 class="header-text">Type</h3></div>
            <div style="text-align: center;"><h3 class="header-text">Source</h3></div>
            <div style="text-align: center;"><h3 class="header-text">Visible</h3></div>
            <div style="text-align: center;"><h3 class="header-text">Period</h3></div>
            <div style="text-align: center;"><h3 class="header-text">Color</h3></div>
            <div style="text-align: center;"><h3 class="header-text">Properties</h3></div>
            <hr style="grid-column: 1 / span 9; width: 100%; height: 1px; border: 1px solid #ccc; margin: 5px 0;">
        </div>

        <!-- Loop through each indicator in indicator_list -->
        {% for indicator in indicator_list %}
        <div class="indicator-row" style="display: grid; grid-column: 1 / span 9; align-items: center; grid-template-columns: 75px 200px 100px 150px 150px 75px 100px 100px auto; gap: 10px; padding-left: 10px;">

            <!-- Edit and Remove buttons -->
            <div style="text-align: center;">
                <button type="button" class="e_btn" onclick="UI.indicators.deleteIndicator('{{indicator}}', event)">&#10008;</button>
                <button type="button" class="e_btn edit" onclick="UI.indicators.updateIndicator(event)">&#x2714;</button>
            </div>

            <!-- Indicator Name -->
            <div style="text-align: center;">{{indicator}}</div>

            <!-- Fixed property: Value -->
            <div style="text-align: center;">
                <!-- Create a generic value container for JavaScript to populate -->
                <textarea class="ie_value" id="{{indicator}}_value" name="value" readonly style="resize: none; overflow: hidden; height: auto; width: 100%; border: none; background: transparent; text-align: center;">N/A</textarea>
            </div>

            <!-- Fixed property: Type -->
            <div style="text-align: center;">
                {% if 'type' in indicator_list[indicator] %}
                <span id="{{indicator}}_type">{{indicator_list[indicator]['type']}}</span>
                {% else %}
                <span>-</span>
                {% endif %}
            </div>

            <!-- Source fields for Symbol, Timeframe, Exchange -->
            <div style="text-align: center;">
                <input list="symbols" class="ietextbox" id="{{indicator}}_source_symbol" name="market" value="{{indicator_list[indicator]['source']['market']}}">
                <datalist id="symbols">
                    {% for symbol in symbols %}
                    <option value="{{symbol}}"></option>
                    {% endfor %}
                </datalist>

                <input list="timeframes" class="ietextbox" id="{{indicator}}_source_timeframe" name="timeframe" value="{{indicator_list[indicator]['source']['timeframe']}}">
                <datalist id="timeframes">
                    {% for timeframe in intervals %}
                    <option value="{{timeframe}}"></option>
                    {% endfor %}
                </datalist>

                <input list="exchanges" class="ietextbox" id="{{indicator}}_source_exchange_name" name="exchange" value="{{indicator_list[indicator]['source']['exchange']}}">
                <datalist id="exchanges">
                    {% for exchange in exchanges %}
                    <option value="{{exchange}}"></option>
                    {% endfor %}
                </datalist>
            </div>

            <!-- Checkbox for Visibility -->
            <div style="text-align: center;">
                {% if 'visible' in indicator_list[indicator] %}
                <input type="checkbox" id="{{indicator}}_visible" value="{{indicator_list[indicator]['visible']}}" name="visible" {% if indicator in checked %} checked {% endif %}>
                {% else %}
                <span>-</span>
                {% endif %}
            </div>

            <!-- Period field -->
            <div style="text-align: center;">
                {% if 'period' in indicator_list[indicator] %}
                <input class="ietextbox" type="number" id="{{indicator}}_period" value="{{indicator_list[indicator]['period']}}" name="period">
                {% else %}
                <span>-</span>
                {% endif %}
            </div>

            <!-- Color Picker -->
            <div style="text-align: center;">
                {% if 'color' in indicator_list[indicator] %}
                    <input class="ietextbox" type="color" id="{{indicator}}_color"
                           value="{{ indicator_list[indicator]['color'] if indicator_list[indicator]['color'] else '#000000' }}"
                           name="color">
                {% else %}
                    <input class="ietextbox" type="color" id="{{indicator}}_color" value="#000000" name="color">
                {% endif %}
            </div>

            <!-- Dynamic properties -->
            <div style="grid-column: span 1; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
                {% for property, value in indicator_list[indicator].items() %}
                    {% if property not in ['type', 'value', 'color', 'period', 'visible', 'source'] %}
                    <div style="margin-bottom: 17px;">
                        <label for="{{indicator}}_{{property}}" class="ietextbox-label">{{property}}</label>
                        {% if 'color' in property %}
                        <input class="ietextbox" type="color" id="{{indicator}}_{{property}}" value="{{value}}" name="{{property}}">
                        {% else %}
                        <input class="ietextbox" type="text" id="{{indicator}}_{{property}}" value="{{value}}" name="{{property}}">
                        {% endif %}
                    </div>
                    {% endif %}
                {% endfor %}
            </div>

        </div>
        {% endfor %}
    </div>
</div>

<!-- Styles -->
<style>
    /* General shadow styling for all elements except checkboxes */
    .ietextbox, .e_btn, input[type="color"] {
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }

    /* Style for Edit and Remove buttons */
    .e_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        padding: 8px 12px;
        background-color: #f44336; /* Red for remove */
        color: white;
        border: 1px solid black;
        cursor: pointer;
    }

    /* Green background for Edit button */
    .e_btn.edit {
        background-color: #4CAF50;
    }

    /* Hover effect for buttons */
    .e_btn:hover {
        opacity: 0.9;
        box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
    }

    .e_btn:focus {
        outline: none;
    }

    /* Color picker input */
    input[type="color"] {
        border: 1px solid black;
        padding: 5px;
        width: 60px;
        height: 40px;
        border-radius: 17px;
        box-sizing: border-box;
    }

    /* Hover effect for color picker */
    input[type="color"]:hover {
        box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
    }

    /* Styling for input fields and textboxes */
    .ietextbox {
        width: 100%;
        padding: 5px;
        border-radius: 15px;
        box-sizing: border-box;
    }

    /* Alternating row colors */
    .indicator-row:nth-child(even) {
        background-color: #E0E0E0;
    }

    .indicator-row:nth-child(odd) {
        background-color: #F7E1C1;
    }

    /* Opposite colors for textboxes */
    .indicator-row:nth-child(even) .ietextbox {
        background-color: #F7E1C1;
    }

    .indicator-row:nth-child(odd) .ietextbox {
        background-color: #E0E0E0;
    }
    input[type="checkbox"] {
        width: 20px;  /* Increase the size of the checkbox */
        height: 20px; /* Adjust the height to match */
        cursor: pointer; /* Add a pointer cursor for better UX */
        margin: 0; /* Reset margin */
    }

</style>

<!-- JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle focus and restore behavior for each dropdown
        document.querySelectorAll('.ietextbox').forEach(function(input) {
            let originalValue = input.value;

            // Clear the input when focused
            input.addEventListener('focus', function() {
                originalValue = input.value;
                input.value = '';  // Clear the input
            });

            // Restore the original value if no new selection is made
            input.addEventListener('blur', function() {
                if (!input.value) {
                    input.value = originalValue;  // Restore the original value if input is empty
                }
            });
        });
    });
</script>
