<!-- WIDGET MARKET TRADES START -->
<div class="widget widget-market-trades">

    <div class="widget-container">

        <!-- widget head start -->
        <div class="widget-head">

            <!-- widget market trades navigation start -->
            <div class="widget-market-trades__navigation">
                <nav>
                    <a class="navigation-active">{{ $t('Market Trades') }}</a>
                </nav>
            </div>
            <!-- widget market trades navigation end -->

        </div>
        <!-- widget head end -->

        <!-- widget body start -->
        <div class="widget-body">
            <!-- widget market trades title start -->
            <div class="widget-market-trades__title">
                <div class="widget-market-trades__title-price">{{ $t('Price') }} ({{ market.quote_currency }})</div>
                <div class="widget-market-trades__title-amount">{{ $t('Amount') }} ({{ market.base_currency }})</div>
                <div class="widget-market-trades__title-time">{{ $t('Time') }}</div>
            </div>
            <!-- widget market trades title end -->

            <!-- widget market trades list start -->
            <div class="widget-market-trades__list">
                <vue-scroll>
                    <div v-for="trade in trades" class="widget-market-trades__list-item">
                        <a class="widget-market-trades__list-item__link">
                            <div class="widget-market-trades__list-item__price">
                                <span :class="{'color-buy': trade.side == 'buy', 'color-sell': trade.side == 'sell'}">{{ decimal_format(trade.price, market.quote_precision, market.quote_currency_type) }}</span>
                            </div>
                            <div class="widget-market-trades__list-item__amount">{{ decimal_format(trade.quantity, market.base_precision) }}</div>
                            <div class="widget-market-trades__list-item__time">{{ parseTime(trade.created_at) }}</div>
                        </a>
                    </div>
                    <div class="widget-empty" v-if="trades && trades.length == 0">
                        <span>{{ $t('No trades found') }}</span>
                    </div>
                </vue-scroll>
            </div>
            <!-- widget market trades list end -->


        </div>
        <!-- widget body end -->


    </div>
    <binance-trades-socket :market="market" />
</div>
<!-- WIDGET MARKET TRADES END -->
