{{--
    Legend for the trading network in a PDF.

    Shared by stats/pdf.blade.php and reports/pdf.blade.php so the two exports
    cannot drift apart. Expects $networkLegend, the result of
    networkLegend() on either Livewire component.

    Inline styles rather than classes: dompdf does not load the stylesheet, and
    a table rather than flex because dompdf ignores flex and gap.
--}}
@if (!empty($networkLegend))
    @if (!empty($networkLegend['view_hint']))
        <div style="font-size: 9px; margin-top: 6px; color: #333;">
            <strong>{{ $networkLegend['view_label'] ?? '' }}:</strong>
            {{ $networkLegend['view_hint'] }}
        </div>
    @endif

    <table style="width: 100%; margin-top: 6px;" cellpadding="0" cellspacing="0">
        <tr>
            <td style="border: none; padding: 0 18px 0 0; vertical-align: top; width: 40%;">
                <div style="font-size: 8px; text-transform: uppercase; color: #777;">
                    {{ __('Colour') }}: {{ $networkLegend['color_meaning'] }}
                </div>
                @if (!empty($networkLegend['colors']))
                    <div style="font-size: 9px; margin-top: 2px;">
                        @foreach ($networkLegend['colors'] as $item)
                            <span style="display: inline-block; margin-right: 10px;">
                                <span style="display: inline-block; width: 8px; height: 8px; background-color: {{ $item['color'] }};"></span>
                                {{ $item['label'] }}
                            </span>
                        @endforeach
                    </div>
                @endif

                @if (!empty($networkLegend['node_styles']))
                    <div style="font-size: 9px; margin-top: 3px;">
                        @foreach ($networkLegend['node_styles'] as $style)
                            <span style="display: inline-block; margin-right: 10px;">
                                <span style="display: inline-block; width: 8px; height: 8px; border-radius: 4px;
                                             border: 1.5px {{ $style['dashed'] ? 'dashed' : 'solid' }} {{ $style['color'] }};{{ $style['hollow'] ? '' : ' background-color: #94a3b8;' }}"></span>
                                {{ $style['label'] }}
                            </span>
                        @endforeach
                    </div>
                @endif

            </td>

            <td style="border: none; padding: 0 18px 0 0; vertical-align: top; width: 30%;">
                <div style="font-size: 8px; text-transform: uppercase; color: #777;">
                    {{ __('Dot size') }}
                </div>
                <div style="font-size: 9px; margin-top: 2px;">{{ $networkLegend['size_meaning'] }}</div>
            </td>

            <td style="border: none; padding: 0; vertical-align: top; width: 30%;">
                <div style="font-size: 8px; text-transform: uppercase; color: #777;">
                    {{ __('Line thickness') }}
                </div>
                <div style="font-size: 9px; margin-top: 2px;">{{ $networkLegend['width_meaning'] }}</div>

                @if (!empty($networkLegend['directions']))
                    <div style="font-size: 9px; margin-top: 3px;">
                        @foreach ($networkLegend['directions'] as $dir)
                            <span style="display: inline-block; margin-right: 10px;">
                                <span style="display: inline-block; width: 14px; height: 3px; background-color: {{ $dir['color'] }};"></span>
                                {{ $dir['label'] }}
                            </span>
                        @endforeach
                    </div>
                @endif
            </td>
        </tr>
    </table>
@endif