brighter-trading/templates/indicators_hud.html

    <div class="content" id="indicator_panel" style="max-height: 70px;">
        <!-- Edit Indicator Panel -->

<div id="edit_indcr_panel" style="display: grid; grid-template-columns: 1fr 1fr;">
  <div class="section" style="grid-column: 1;">
    <button class="btn">New Indicator</button>
  </div>
  <div class="section" style="grid-column: 2;">
    <button class="btn">Indicator Options</button>
  </div>
  <div class="section" style="display: grid; grid-row: 2; grid-column: 1 / span 2; grid-template-columns: 75px 200px 200px auto; overflow-x: scroll;">
    <h3 style="grid-column: 1 / span 2; text-align: left;">Indicators</h3>
      <hr style="width: 100%; grid-column: 1 / span 10;">
    <div style="grid-column: 2;">
      <h3>Name</h3>
    </div>
    <div style="grid-column: 3;">
      <h3>Type</h3>
    </div>
    <div style="grid-column: 4 / span 8;">
      <h3>Properties</h3>
    </div>
    <!-- Edit Indicator Rows of individual forms to edit each indicator --!>
    {% for indicator in indicator_list %}
        <form action="/settings" method="post" style="display: grid; grid-column: 1 / span 10; grid-template-columns: 75px 200px 200px repeat(7, 1fr);">
            <input type="hidden" name="setting" value="edit_indicator"/>
            <div id="edit_indctr_controls" style="grid-column: 1;">
                <button type="submit" name="delete" class="e_btn" value="{{indicator}}">&#10008;</button>
                <button type="submit" name="submit" style ="color:darkgreen;" class="e_btn" value="{{indicator}}">&#x2714;</button>
            </div>

            <div class="iename" style="grid-column: 2;">{{indicator}}</div>

            {% for property in indicator_list[indicator] %}
                {% set list1 = property.split('_') %}
                <div class="ieprop" >
                    <label class="ietextbox" for="{{indicator}}_{{property}}">{{property}}</label>
                    {% if property=='type' %}
                        <select class="ietextbox" id="{{indicator}}_{{property}}" name="{{property}}">
                            {% for i_type in indicator_types %}
                                <option value="{{i_type}}" {% if indicator_list[indicator][property] == i_type %} selected="selected"{%endif%}>{{i_type}}</option>
                            {% endfor %}
                        </select>
                    {% elif property=='ma' %}
                        <select class="ietextbox" id="{{indicator}}_{{property}}" name="{{property}}">
                           {% for ma_val in ma_vals %}
                               <option value="{{ma_vals[ma_val]}}" {% if indicator_list[indicator][property] == ma_vals[ma_val] %} selected="selected"{%endif%}>{{ma_val}}</option>
                           {% endfor %}
                        </select>
                    {% elif property=='color' or list1[0]=='color'  %}
                        <input class="ietextbox" type="color" id="{{indicator}}_{{property}}"
                                value="{{indicator_list[indicator][property]}}"
                                name="{{property}}">
                    {% elif property=='period' %}
                        <input class="ietextbox" type="number" id="{{indicator}}_{{property}}"
                                value="{{indicator_list[indicator][property]}}"
                                name="{{property}}">
                    {% elif property=='visible' %}
                        <input class="ietextbox" type="checkbox" id="{{indicator}}_{{property}}"
                                value="{{indicator_list[indicator][property]}}"
                                name="{{property}}"
                                {% if indicator in checked %} checked{%endif%}>
                    {% elif property=='value' %}
                        <input class="ie_value" type="number" id="{{indicator}}_{{property}}"
                               value="{{indicator_list[indicator][property]}}"
                               name="{{property}}" readonly>
                    {% else %}
                        <input class="ietextbox" type="text" id="{{indicator}}_{{property}}"
                                value="{{indicator_list[indicator][property]}}"
                                name="{{property}}">
                    {%endif%}
                    </div>
                    {% endfor %}
                </form>
                {% endfor %}
                <!-- End of Rows of individual forms to edit each indicator --!>
  </div>
</div>

    </div>


<!--                <form action="/settings" method="post" id="new_i_form">-->
<!--                <input type="hidden" name="setting" value="new_indicator"/>-->
<!--                    <hr>-->
<!--                    &lt;!&ndash; Create indicator div container &#45;&#45;!>-->
<!--                    <div id="create_indcr_container">-->
<!--                        <h1>Add Indicator</h1>-->
<!--                        <label for "newi_name">Indicator Name</label><input type ="text" name="newi_name" value="New Indicator">-->
<!--                        <label for "newi_type">Type</label>-->
<!--                        <select id="newi_type" name="newi_type">-->
<!--                            {% for i_type in indicator_types %}-->
<!--                            <option value="{{i_type}}">{{i_type}}</option>-->
<!--                            {% endfor %}-->
<!--                        </select>-->
<!--                        <br><br>-->
<!--                        <span>Properties: <span id="new_prop_list"></span></span>-->
<!--                        <button name="add_prop_clear" id="add_prop_clear" style="color:darkred;" type="button" value="add_prop_clear" onclick="document.getElementById('new_prop_list').innerHTML=''">&#10008;</button>-->

<!--                        <br><br>-->
<!--                        <div id="add_prop_container" name="add_prop_container">-->
<!--                            <label for "new_prop_name">Property Name</label>-->
<!--                            <input type="text" id="new_prop_name" name="new_prop_name" value="name">-->
<!--                            <br>-->
<!--                            <label for "new_prop_value">Property Value</label>-->
<!--                            <input type="text" id="new_prop_value" name="new_prop_value" value="value">-->
<!--                            <button name="add_prop" id="add_prop" type="button" value="add_prop" style="color:darkgreen;" onclick="UI.indicators.add_to_list()">&#10009;</button>-->
<!--                            <label for "add_prop">Add Property</label>-->

<!--                        </div>-->
<!--                            <br>-->
<!--                                        &lt;!&ndash; Trading pair selector &ndash;&gt;-->
<!--                    <label for="ei_symbols" >Trading Pair</label>-->
<!--                    <input list="ei_symbols" name="ei_symbol" id="ei_symbol" style="width: 96px;">-->
<!--                    <datalist id="ei_symbols">-->
<!--                        {% for symbol in symbols %}-->
<!--                        <option>{{ symbol }}</option>-->
<!--                        {% endfor %}-->
<!--                    </datalist>-->
<!--                &lt;!&ndash; Time timeframe selector &ndash;&gt;-->
<!--                    <select id="ei_timeframe" name="ei_timeframe">-->
<!--                        {% for time_frame in intervals %}-->
<!--                        <option {% if time_frame == interval_state %} selected="selected" {%endif%}>{{ time_frame }}</option>-->
<!--                        {% endfor %}-->
<!--                    </select>-->
<!--                &lt;!&ndash; Exchange selector &ndash;&gt;-->
<!--                    <select id="ei_exchange_name" name="ei_exchange_name">-->
<!--                        {% for exchange in exchanges %}-->
<!--                        <option {% if exchange == selected_exchange %} selected="selected" {%endif%}>{{ exchange }}</option>-->
<!--                        {% endfor %}-->
<!--                    </select>-->

<!--                            <button type="button" onclick="UI.indicators.submit_new_i()" name="create_indicator" id="create_indicator" >Create New Indicator</button>-->
<!--                            <input type="hidden" id="new_prop_obj" name="new_prop_obj" value="">-->
<!--                    </div> &lt;!&ndash; End of Create indicator div container &#45;&#45;!>-->
<!--                </form>-->
<!--            </div>&lt;!&ndash; End of Edit Indicator Panel &ndash;&gt;-->