{% macro config_exchange_card(config, exchange, keys_value="*********", add_class='') -%}
    <!-- Card -->
    <div class="card mb-4 {{add_class}} config-card">

        <div class="card-header"><h4>{{exchange}}</h4></div>

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

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

            <p class="card-text api">
                API Key : <a href="#"
                            id="exchange_api-key"
                            config-key="exchanges_{{exchange}}_api-key"
                            config-type="global_config"
                            config-value="{{keys_value}}"
                            startup-config-value="{{keys_value}}"
                            data-type="text"
                            data-pk="1"
                            data-title="Enter api key"
                            class="editable editable-click config-element">
                {{keys_value}}</a><br>

                API Secret : <a href="#"
                            id="exchange_api-secret"
                            config-key="exchanges_{{exchange}}_api-secret"
                            config-type="global_config"
                            config-value="{{keys_value}}"
                            startup-config-value="{{keys_value}}"
                            data-type="text"
                            data-pk="1"
                            data-title="Enter exchange api secret"
                            class="editable editable-click config-element">
                {{keys_value}}</a><br>
            </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 %}