{% extends 'base.html.twig' %}
{% block title %}Paires de Crypto disponible{% endblock %}
{% block class_body %}page_symbols{% endblock %}
{% block body %}
{# {{ dump(coins_infos,pairs_usdc,symbols) }} #}
{# {{ dump(db_symbols) }} #}
<article class="container">
    <table class="sortable sticky striped">
        <thead>
            <tr>
                <th scope="col">Statut</th>
                <th scope="col">Symbol</th>
                <th scope="col">Day change</th>
                <th scope="col">Price</th>
                <th scope="col">Rank</th>
            </tr>
        </thead>
        <tbody>
            {% for symbol_row in db_symbols %}
                {% if pairs_usdc[symbol_row.symbol].rank is defined %}
            <tr>
                <td class="enable_control">
                    <fieldset>
                        <label>
                            <input name="switch[{{ symbol_row.id }}]" {% if symbol_row.enabled is true %}checked{% endif %} type="checkbox"  role="switch" value="{{ symbol_row.symbol }}" />
                        </label>
                    </fieldset>
                </td>
                <td>
                    <a target="_blank" href="https://www.binance.com/fr/trade/{{ symbol_row.symbol }}?type=cross">
                        {{ symbol_row.symbol }}
                    </a>
                </td>
                <td class="percent">
                    {% if pairs_usdc[symbol_row.symbol].day_change >= 0 %}
                        <button class="secondary pico-background-green-550">
                    {% else %}
                        <button class="secondary pico-background-red-550">
                    {% endif %}
                    {{ pairs_usdc[symbol_row.symbol].day_change | round(2) }}</button>
                </td>
                <td>{{ pairs_usdc[symbol_row.symbol].price }}</td>
                <td>{{ pairs_usdc[symbol_row.symbol].rank }}</td>
            </tr>
            {% else %}
                {{ dump(symbol_row.symbol,pairs_usdc[symbol_row.symbol]) }}
            {% endif %}
            {% endfor %}
        </tbody>
    </table>
</article>
{% endblock %}
{% block footer %}
<div class="container">
    <span class="countActiveSymbol"></span>
</div>
{% endblock %}