@extends('layouts.vpm-mobile-app', ['active' => 'markets'])

@section('title', 'Markets')

@section('content')
<div class="vpm-markets-page" data-vpm-markets>
    <ul class="vpm-markets-cats" role="tablist" aria-label="Market categories">
        @foreach ($categories as $category)
            <li>
                <button
                    type="button"
                    role="tab"
                    class="vpm-markets-cats__btn {{ $category['id'] === $activeCategory ? 'vpm-markets-cats__btn--active' : '' }}"
                    data-vpm-markets-cat="{{ $category['id'] }}"
                    aria-selected="{{ $category['id'] === $activeCategory ? 'true' : 'false' }}"
                    aria-controls="vpm-markets-panel-{{ $category['id'] }}"
                >
                    <img src="{{ asset($category['icon']) }}" alt="" width="20" height="20" loading="lazy" decoding="async">
                    <span>{{ $category['label'] }}</span>
                </button>
            </li>
        @endforeach
    </ul>

    @foreach ($categories as $category)
        @php($items = $catalog[$category['id']] ?? [])
        <ul
            id="vpm-markets-panel-{{ $category['id'] }}"
            class="vpm-markets-list"
            role="tabpanel"
            data-vpm-markets-panel="{{ $category['id'] }}"
            @if ($category['id'] !== $activeCategory) hidden @endif
        >
            @foreach ($items as $item)
                @php($tradeUrl = \App\Support\MarketsCatalog::tradingUrl($category['id'], $item['symbol'], $item['pair'] ?? null))
                <li class="vpm-markets-list__item">
                    <div class="vpm-markets-list__row">
                        <a href="{{ $tradeUrl }}" class="vpm-markets-list__link">
                            <span class="vpm-markets-list__logo-wrap">
                                <img
                                    src="{{ $item['logo'] }}"
                                    alt="{{ $item['name'] }}"
                                    class="vpm-markets-list__logo"
                                    width="48"
                                    height="48"
                                    loading="lazy"
                                    decoding="async"
                                    data-vpm-market-logo
                                >
                                <span class="vpm-markets-list__logo-fallback" hidden aria-hidden="true">
                                    {{ \App\Support\MarketLogo::initials($item['symbol']) }}
                                </span>
                            </span>
                            <div class="vpm-markets-list__copy">
                                <p class="vpm-markets-list__symbol">{{ $item['symbol'] }}</p>
                                <p class="vpm-markets-list__name">{{ $item['name'] }}</p>
                            </div>
                        </a>
                        <button
                            type="button"
                            class="vpm-markets-list__star"
                            data-vpm-watchlist-toggle
                            data-symbol="{{ $item['symbol'] }}"
                            data-category="{{ $category['id'] }}"
                            data-name="{{ $item['name'] }}"
                            data-logo="{{ $item['logo'] }}"
                            data-pair="{{ $item['pair'] ?? '' }}"
                            aria-label="Add {{ $item['symbol'] }} to watchlist"
                            aria-pressed="false"
                        >
                            <span class="material-icons notranslate" aria-hidden="true">star_border</span>
                        </button>
                    </div>
                </li>
            @endforeach
        </ul>
    @endforeach
</div>
@endsection