movie-list.blade.php

<div class="space-y-4">
    @if($error)
        <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
            <h3 class="text-lg font-semibold text-red-800 mb-2">❌ API Error</h3>
            <p class="text-sm text-red-600">{{ $error }}</p>
        </div>
    @elseif($loaded)
        <h3 class="text-lg font-semibold mb-4">📱 Tech Products (Real API Data)</h3>
        
        @foreach($products as $product)
            <div class="flex space-x-4 p-3 bg-white border rounded-lg shadow-sm">
                <div class="w-16 h-16 bg-blue-500 rounded flex items-center justify-center text-white font-bold text-xs">
                    {{ $product['id'] }}
                </div>
                <div class="flex-1">
                    <h4 class="font-semibold text-gray-900 text-sm">{{ $product['name'] }}</h4>
                    @if(!empty($product['data']))
                        <div class="text-xs text-gray-600 mt-1">
                            @foreach($product['data'] as $key => $value)
                                <span class="inline-block bg-gray-100 px-2 py-1 rounded mr-1 mb-1">
                                    {{ $key }}: {{ is_numeric($value) ? $value : $value }}
                                </span>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        @endforeach
        
        <div class="mt-4 text-xs text-gray-500">
            ✅ Loaded: {{ now()->format('H:i:s') }} from restful-api.dev
        </div>
    @else
        <div class="text-center text-gray-500">
            Loading products...
        </div>
    @endif
</div>