@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">Profile: {{ $user->uname }}</h1>
            <p>{{ $user->name ?? '' }}</p>
        </header>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default effect2">
                <div class="panel-heading"><strong>Newest Artworks</strong></div>
                <div class="panel-body">
                    <div class="gallery-grid">
                        @foreach($artworks as $art)
                            <div class="thumb-card effect2">
                                <a href="/art/{{ $art->id }}/{{ Str::slug($art->name ?? '') }}" class="thumb-link">
                                    <img src="{{ $art->thumb }}" srcset="{{ $art->thumb_srcset }}" alt="{{ $art->name }}" class="img-responsive" loading="lazy" decoding="async">
                                </a>
                                <div class="thumb-meta">
                                    <div class="thumb-title">{{ $art->name }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-default effect2">
                <div class="panel-heading"><strong>User</strong></div>
                <div class="panel-body">
                    <img src="{{ \App\Support\AvatarUrl::forUser((int) $user->user_id, null, 128) }}" class="img-responsive" style="max-width:120px;" alt="{{ $user->uname }}">
                    <h3>{{ $user->uname }}</h3>
                    <p>{{ $user->about_me ?? '' }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection