<div class="max-w-6xl mx-auto px-4 py-8">
<h2 class="text-2xl font-bold mb-6">Markets list</h2>

<div class="overflow-x-auto">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th class="px-6 py-3">Market</th>
                <th class="px-6 py-3">Base</th>
                <th class="px-6 py-3">Quote</th>
                <th class="px-6 py-3">Quote Tick Size</th>
                <th class="px-6 py-3">Base Min Order Size</th>
                <th class="px-6 py-3">Status</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($markets as $market)
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white flex items-center gap-2">
                        <img src="https://cryptoicon-api.pages.dev/api/icon/{{ strtolower($market['base']) }}" alt="{{ $market['base'] }}" class="w-5 h-5">
                        {{ $market['base'] }}-{{ $market['quote'] }}
                    </td>
                    <td class="px-6 py-4">{{ $market['base'] }}</td>
                    <td class="px-6 py-4">{{ $market['quote'] }}</td>
                    <td class="px-6 py-4">{{ $market['tick_size'] }}</td>
                    <td class="px-6 py-4">{{ $market['min_qty'] }}</td>
                    <td class="px-6 py-4 text-green-600 font-semibold">● {{ $market['status'] }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>