@extends('layouts.client')
@section('title', 'Markets')
@section('main_class', 'client-main--markets')
@section('content')
<div class="markets-page">
<h1 class="client-page-title">Web3 Derp Markets</h1>
<p class="client-page-sub">Track real-time crypto, commodities, and metals prices</p>

<div class="market-tabs">
    <a href="{{ route('client.markets', ['tab' => 'coins']) }}" class="market-tab {{ $tab === 'coins' ? 'active' : '' }}">Coins</a>
    <a href="{{ route('client.markets', ['tab' => 'commodities']) }}" class="market-tab {{ $tab === 'commodities' ? 'active' : '' }}">Commodities</a>
    <a href="{{ route('client.markets', ['tab' => 'metals']) }}" class="market-tab {{ $tab === 'metals' ? 'active' : '' }}">Metals</a>
</div>

<div class="client-card market-table-wrap">
    <table class="market-table market-table-full">
        <colgroup>
            <col class="col-name">
            <col class="col-symbol">
            <col class="col-price">
            <col class="col-change">
            <col class="col-holdings">
            <col class="col-pl">
            <col class="col-actions">
        </colgroup>
        <thead>
            <tr>
                <th class="col-name">Name</th>
                <th class="col-symbol">Symbol</th>
                <th class="col-price">Last Price (USD)</th>
                <th class="col-change">24h Change</th>
                <th class="col-holdings">Holdings</th>
                <th class="col-pl">P/L %</th>
                <th class="col-actions">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($markets as $market)
            <tr>
                <td class="col-name market-name">
                    <span class="market-name-cell">
                        @include('partials.crypto-logo', ['symbol' => $market->symbol, 'name' => $market->name, 'size' => 28, 'class' => 'market-name-cell__logo'])
                        <span>{{ $market->name }}</span>
                    </span>
                </td>
                <td class="col-symbol">{{ $market->displaySymbol() }}</td>
                <td class="col-price market-price">${{ $market->formattedPrice() }}</td>
                <td class="col-change">
                    @php $change = (float) $market->change_24h; @endphp
                    <span class="{{ $change >= 0 ? 'change-positive' : 'change-negative' }}">
                        {{ $change >= 0 ? '+' : '' }}{{ number_format($change, 2) }}%
                    </span>
                </td>
                <td class="col-holdings market-holdings">0.0000</td>
                <td class="col-pl market-pl">—</td>
                <td class="col-actions">
                    <div class="market-actions">
                        <a href="{{ route('client.trade', ['market' => $market->id]) }}" class="market-btn market-btn-trade">Trade</a>
                        <a href="{{ route('client.trade', ['market' => $market->id, 'direction' => 'buy']) }}" class="market-btn market-btn-buy">Buy</a>
                        <a href="{{ route('client.trade', ['market' => $market->id, 'direction' => 'sell']) }}" class="market-btn market-btn-sell">Sell</a>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="7" class="empty-state">No markets in this category yet.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
</div>
@endsection