@extends('layouts.public')

@section('content')
<div class="max-w-7xl mx-auto p-6">
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-2xl font-bold">{{ $list->name }}</h1>
        <a href="{{ route('lists.index') }}" class="text-blue-700 hover:underline">← マイリストへ</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        @foreach($funds as $fund)
            <div class="p-4 bg-white rounded-lg shadow-sm border">
                <a href="{{ $fund->url ?: route('public.funds.show', $fund) }}" target="_blank" rel="noopener" class="text-base font-semibold text-blue-700 hover:underline">{{ $fund->name }}</a>
                <div class="text-xs text-gray-500">{{ optional($fund->crowdfundingSite)->name }}</div>
                <div class="mt-2 text-sm grid grid-cols-2 gap-2">
                    <div>利回り: {{ $fund->expected_return_rate ? number_format($fund->expected_return_rate, 2) . '%' : '-' }}</div>
                    <div>募集: ¥{{ number_format($fund->target_amount, 0) }}</div>
                </div>
                <div class="mt-3"><x-ui.progress :value="$fund->progress_rate" /></div>
                <form method="POST" action="{{ route('lists.removeFund', [$list, $fund]) }}" class="mt-3 text-right">
                    @csrf
                    @method('DELETE')
                    <button class="px-3 py-1 border rounded text-gray-700">リストから削除</button>
                </form>
            </div>
        @endforeach
    </div>

    <div class="mt-6">
        {{ $funds->links('vendor.pagination.public') }}
    </div>
</div>
@endsection