{% macro currency_card(currency, total_portfolio) -%}
    <!-- Card -->
    <div class="card mb-4 medium-size">

    <!--Title-->
    <div class="card-header">{{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/{{ currency.lower() }}.png" alt="Can't find image for {{ currency }} :(">
      <a href="#!">
        <div class="mask rgba-white-slight waves-effect waves-light"></div>
      </a>
    </div>


    <!--Card content-->
    <ul class="list-group list-group-flush">
        <li class="list-group-item bg-transparent">Free : {{ total_portfolio[currency]["available"] }} {{ currency }}</li>
        <li class="list-group-item bg-transparent">Total : {{ total_portfolio[currency]["total"] }} {{ currency }}</li>
    </ul>

    </div>
    <!-- Card -->
{%- endmacro %}

{% macro pair_status_card(pair, status, watched_symbols) -%}
    <!-- Card -->
    <div class="card pair_status_card mb-4 small-size">

    <!--Title-->
    <div class="card-header">{{ pair }}
        <a class="float-right" href="#">
            <i class="{{'fas' if pair in watched_symbols else 'far'}} fa-star watched_element" symbol="{{ pair }}" update_url="{{ url_for('watched_symbols') }}"
               data-toggle="tooltip" data-placement="top" title="Add to / Remove from watched markets"></i>
        </a>
    </div>

    <!--Card image-->
    <div class="view overlay animated fadeIn img-fluid mx-auto">
      <img class="card-img-top" src="https://raw.githubusercontent.com/hyperdexapp/cryptocurrency-icons/master/128/icon/{{ pair.split('/')[0].lower() }}.png" alt="Can't find image for {{ pair.split('/')[0] }} :(">
      <a href="{{ url_for('symbol_market_status', exchange=exchange, symbol=pair) }}">
        <div class="mask rgba-white-slight waves-effect waves-light"></div>
      </a>
    </div>

    <!--Card content-->
    <ul class="list-group list-group-flush">
        {% for exchange, evaluation in status.items() %}
            <li class="list-group-item bg-transparent status" status="{{evaluation[0]}}">
                {{ exchange }}: {{ evaluation[0] }} ({{ evaluation[1] }})
                <a href="{{ url_for('symbol_market_status', exchange=exchange, symbol=pair) }}"><i class="float-right fa fa-chart-bar text-white"> </i></a>
            </li>
        {% endfor %}
    </ul>

    </div>
    <!-- Card -->
{%- endmacro %}
