{% import 'components/config/editable_config.html' as m_editable_config %}
{% macro config_service_card(config, service_name, service, add_class='', no_select=False, default_values=False) -%}
    {% set service_config_fields = service.get_default_value() %}

    <!-- Card -->
    <div class="card mb-4 {{add_class}} config-card">

        <div class="card-header">
            <h4>
                {{service_name}}
                <a class="float-right text-danger" target="_blank" rel="noopener noreferrer" href="{{service.get_help_page()}}">
                    <i class="fa fa-question"></i>
                </a>
            </h4>
        </div>

        <!--Card image-->
        <div class="view overlay">
            <!--{{ service_name }}-->
        </div>

        <!--Card content-->
        <div class="card-body" name="{{service_name}}" config-key="services_{{service_name}}">

            <p class="card-text api">
                {% for req in service_config_fields %}
                    {{ m_editable_config.editable_key(  service_config_fields if (default_values or req not in config[service_name]) else config[service_name],
                                                        req,
                                                        "services_" + service_name + "_" + req,
                                                        "global_config",
                                                        service_config_fields[req] if default_values else config[service_name][req],
                                                        service_config_fields[req] if default_values else config[service_name][req],
                                                        suggestions=service_config_fields[req] if default_values else config[service_name][req],
                                                        no_select=no_select,
                                                        number_step=1,
                                                        force_title=True,
                                                        tooltip=service.get_fields_description()[req],
                                                        identifier=service_name,
                                                        placeholder_str="Add user(s) in whitelist")
                    }}
                {% endfor %}
            </p>

            <button type="button" class="btn btn-danger remove-btn px-3 waves-effect"><i class="fa fa-ban" aria-hidden="true"></i> Remove</button>
        </div>
    </div>
{%- endmacro %}