@extends('layouts.legacy')

@section('content')
<div class="container-fluid legacy-page">
    <div class="effect2 page-header-wrap">
        <header class="page-heading">
            <h1 class="page-header">{{ $page_title ?? 'My Buddies' }}</h1>
            <p>List of members you are following</p>
        </header>
    </div>

    <div class="container-fluid">
        <div class="icon-grid">
            @forelse($buddies as $b)
                @php
                    $icon = $b->icon ?? 'default.jpg';
                    $uname = $b->uname ?? 'Unknown';
                    $friendId = $b->friend_id ?? $b->friendId ?? null;
                @endphp

                <div class="icon-flex">
                    <div>
                        <a href="/profile/{{ $friendId }}/{{ Str::slug($uname) }}">
                            <h4>{{ $uname }}</h4>
                        </a>
                    </div>

                    <div>
                        <a href="/profile/{{ $friendId }}/{{ Str::slug($uname) }}">
                            <img src="/avatar/{{ $friendId }}/{{ rawurlencode($icon) }}" alt="{{ $uname }}">
                        </a>
                    </div>

                    @if(auth()->check() && auth()->id() == ($b->user_id ?? null))
                        <div>
                            <form method="POST" action="{{ route('legacy.mybuddies.delete', ['id' => $b->id]) }}" onsubmit="return confirm('Really Remove From Friends List: {{ addslashes($uname) }}?');">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-link" type="submit"><img src="/gfx/icon_delete.gif" alt="remove"></button>
                            </form>
                        </div>
                    @endif

                </div>
            @empty
                <p>No buddies yet.</p>
            @endforelse
        </div>

        @if(method_exists($buddies, 'links'))
            <div class="mt-3">{{ $buddies->links() }}</div>
        @endif
    </div>
</div>
@endsection