@extends('layouts.app')
@section('title', 'Trade')
@section('content')
<x-page-header title="Trade" />

<div class="px-5 space-y-3">
    @foreach ($assets as $row)
        <a href="{{ route('trade.show', $row['asset']->symbol) }}" class="flex items-center justify-between bg-white/5 rounded-2xl px-4 py-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-orange-500/15 flex items-center justify-center font-bold text-orange-400 text-sm">
                    {{ substr($row['asset']->symbol, 0, 1) }}
                </div>
                <div>
                    <p class="font-semibold">{{ $row['asset']->name }}</p>
                    <p class="text-xs text-neutral-400">{{ $row['asset']->symbol }}</p>
                </div>
            </div>
            <div class="text-right">
                <p class="font-semibold">₦{{ number_format($row['price_ngn'], 2) }}</p>
                <p class="text-[11px] text-neutral-500">per {{ $row['asset']->symbol }}</p>
            </div>
        </a>
    @endforeach
</div>
@endsection