{% import 'components/config/editable_config.html' as m_editable_config %}
{% macro config_currency_card(config_symbols, crypto_currency, symbol_list, full_symbol_list, add_class='', no_select=False, additional_classes="", symbol="") -%}
    <!-- Card -->
    <div class="card {{add_class}} mb-3 medium-size config-card">

        <!--Title-->
        <div class="card-header">{{crypto_currency}}</div>

        <!--Card image-->
        <div class="view overlay animated fadeIn">
            <img class="card-img-top" src="https://raw.githubusercontent.com/hyperdexapp/cryptocurrency-icons/master/128/icon/{{symbol}}.png"
                alt="Can't find image for {{ crypto_currency }} :("
                style="height:100%">
            <a href="#!">
                <div class="mask rgba-white-slight waves-effect waves-light"></div>
            </a>
        </div>

        <!--Card content-->
        <div class="card-body" name="{{crypto_currency}}" config-key="crypto-currencies_{{crypto_currency}}">

            <p class="card-text symbols {{additional_classes}}">
                     {{ m_editable_config.editable_key( config_symbols,
                                                        crypto_currency,
                                                        "crypto-currencies_" + crypto_currency,
                                                        "global_config",
                                                        config_symbols[crypto_currency]['pairs'] if crypto_currency in config_symbols else [],
                                                        config_symbols[crypto_currency]['pairs'] if crypto_currency in config_symbols else [],
                                                        symbol_list,
                                                        no_select,
                                                        identifier=crypto_currency,
                                                        placeholder_str="Select trading pair(s)")
                    }}
            </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 %}