<!-- Discover Web3 starts -->
<section class="discover_web3 pools_tables pt-120 pb-120 bg9-color">
    <div class="container">
        <div class="row">
            <div
                class="discover_web3__title pools_table__title mb-5 mb-md-6 d-flex align-items-center justify-content-between flex-wrap flex-md-nowrap gap-5">
                <div class="discover_web3__title-left">
                    <h2 class="mb-5 mb-md-6 wow fadeInUp">Discover Web3</h2>
                    <p class="roboto wow fadeInUp">Access Trades Performance via the Beta Tade API tools</p>
                </div>
                <a href="https://dashboard.young-trade.com/" class="cmn-btn py-2 py-md-3 px-5 px-md-6 wow fadeInUp">Participate</a>
            </div>
            <div class="discover_web3__part pools_table__part">
                <div class="singletab">
                    <ul
                        class="tablinks d-flex align-items-center gap-5 gap-sm-10 gap-md-15 gap-lg-19 mb-6 mb-md-8 wow fadeInUp">
                        <li class="nav-links">
                            <button class="tablink clickable-active active">Defi</button>
                        </li>
                       
                    </ul>

                    <div class="tabcontents wow fadeInUp">
                        <div class="tabitem active overflow-auto">
                            <div class="pools_table__totalitem">
                                <table>
                                    <tr>
                                        <th>Coin</th>
                                        <th>24H Change</th>
                                        <th>Price USD</th>
                                        <th>Market Cap</th>
                                        <th>Supply</th>
                                    </tr>


                                    @if ($coins)
                                        @foreach ($coins as $coin)
                                        <tr>
                                            <td>
                                                <div
                                                    class="pools_table__totalitem-ftd d-flex align-items-center gap-3 gap-md-4 ms-3 ms-md-6">
                                                    <div class="d-flex align-items-center gap-4">
                                                        <span>{{$coin->id}}</span>
                                                        <img src="https://assets.coincap.io/assets/icons/{{Str::lower($coin->symbol)}}@2x.png"
                                                            alt="Icons">
                                                    </div>
                                                    <div class="d-flex flex-column">
                                                        <a href="" class="roboto fw-bold">{{$coin->name}}</a>
                                                        <span class="roboto">{{$coin->symbol}}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center gap-1">
                                                    <img src="assets/images/icon/tableicon3.png" alt="Icons">
                                                    <span>${{number_format($coin->priceUsd, 8, '.', ',')}}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <span>${{number_format($coin->priceUsd, 8, '.', ',')}}</span>
                                                <div class="d-flex align-items-center">
                                                    <span class="fs-seven p1-color">{{number_format($coin->changePercent24Hr, 8, '.', ',')}}%</span>
                                                    <i class="ti ti-arrow-narrow-up fs-five p1-color"></i>
                                                </div>
                                            </td>
                                            <td>${{number_format($coin->marketCapUsd, 8, '.', ',')}}</td>
                                            <td>${{number_format($coin->supply, 8, '.', ',')}}</td>
                                        </tr>
                                        @endforeach
                                    @endif

                                    
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Discover Web3 ends -->