{% macro editable_key(config, key, config_key, config_type, config_value, startup_config_value, suggestions="", no_select=False, number_step=0.01, force_title=False, tooltip=None, identifier="", placeholder_str="") -%}
    <span
        {% if tooltip is not none %}
            data-toggle="tooltip" title="{{tooltip}}"
        {% endif %}
    >
        {% if config[key] is string %}
            {{ editable_key_string(config, key, config_key, config_type, config_value, startup_config_value, suggestions, placeholder_str) }}
        {% elif config[key] | is_dict %}
            {{ editable_key_dict(config, key, config_key, config_type, config_value, startup_config_value, suggestions, no_select, number_step, force_title, tooltip, identifier, placeholder_str) }}
        {% elif config[key] | is_list %}
            {{ editable_key_list(config, key, config_key, config_type, config_value, startup_config_value, suggestions, no_select, force_title, identifier, placeholder_str) }}
        {% elif config[key] | is_bool %}
            {{ editable_key_bool(config, key, config_key, config_type, config_value, startup_config_value, suggestions) }}
        {% elif config[key] is number %}
            {{ editable_key_number(config, key, config_key, config_type, config_value, startup_config_value, suggestions, number_step) }}
        {% else %}
            {{ editable_key_string(config, key, config_key, config_type, config_value, startup_config_value, suggestions, placeholder_str) }}
        {% endif %}
    </span>
{%- endmacro %}

{% macro editable_key_string(config, key, config_key, config_type, config_value, startup_config_value, suggestions, placeholder_str="") -%}
    {{ key }} : <a href="#"
                   config-key="{{config_key}}"
                   config-type="global_config"
                   config-value="{{config[key]}}"
                   startup-config-value="{{config[key]}}"
                   data-type="text"
                   data-pk="1"
                   data-clear=false
                   data-onblur="submit"
                   data-highlight=true
                   placeholder="{{ placeholder_str }}"
                   class="editable editable-click config-element">
    {{ config[key] }}</a><br>
{%- endmacro %}

{% macro editable_key_dict(config, key, config_key, config_type, config_value, startup_config_value, suggestions, no_select, number_step, force_title, tooltip, identifier, placeholder_str) -%}
    {{ key }} : <br>
    {% for new_key in config[key] %}
        &emsp;{{  editable_key( config[key],
                            new_key,
                            config_key + "_" + new_key,
                            config_type,
                            config_value[new_key],
                            startup_config_value[new_key],
                            suggestions,
                            no_select,
                            number_step,
                            force_title,
                            tooltip,
                            identifier,
                            placeholder_str)
        }}
    {% endfor %}
{%- endmacro %}

{% macro editable_key_bool(config, key, config_key, config_type, config_value, startup_config_value, suggestions) -%}
    <div class="custom-control custom-switch">
      <input type="checkbox"
             class="custom-control-input config-element"
             config-key="{{config_key}}"
             config-type="global_config"
             config-value="{{config[key]}}"
             startup-config-value="{{config[key]}}"
             data-type="bool"
             id="{{config_key}}"
      {% if config[key] == True %}checked{% endif %}>
      <label class="custom-control-label" for="{{config_key}}">{{ key }}</label>
    </div>
{%- endmacro %}

{% macro editable_key_number(config, key, config_key, config_type, config_value, startup_config_value, suggestions, number_step) -%}
    {{ key }} : <a href="#"
                   config-key="{{config_key}}"
                   config-type="global_config"
                   config-value="{{config[key]}}"
                   startup-config-value="{{config[key]}}"
                   data-type="number"
                   data-step="{{number_step}}"
                   data-pk="1"
                   data-onblur="submit"
                   data-highlight=true
                class="editable editable-click config-element">
    {{ config[key] }}</a><br>
{%- endmacro %}

{% macro editable_key_list(config, key, config_key, config_type, config_value, startup_config_value, suggestions, no_select, force_title, identifier="", placeholder_str="") -%}
    {% if force_title %}
        {{ key }} :
    {% endif %}
    <select config-key="{{ config_key }}"
            config-type="global_config"
            config-value="{{config[key]}}"
            startup-config-value="{{config[key]}}"
            class="editable editable-click config-element multi-select-element"
            data-type="list"
            multiple="multiple"
            style="width:100%;"
            editable_config_id="multi-select-element-{{ identifier }}"
            >
        {% for name in suggestions %}
            <option value="{{ name }}"
            {% if not no_select and name in config[key] %}
                selected="selected"
            {% endif %}
            >
                {{ name }}
            </option>
        {% endfor %}
        {% if not suggestions and not no_select and config[key]%}
            {% for name in config[key] %}
                <option value="{{ name }}"
                        selected="selected">
                    {{ name }}
                </option>
            {% endfor %}
        {% endif %}
    </select>
    {% if not no_select %}
    <br>
    <script>
        $("select[editable_config_id=\"multi-select-element-{{ identifier }}\"]:first").select2({
            dropdownAutoWidth : true,
            tags: true,
            placeholder:"{{ placeholder_str }}"
        });
    </script>
    {% endif %}
{%- endmacro %}