@extends('layouts.app')
@section('title', 'Gallery')
@section('content')
<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
        <h2 style="font-size:17px;color:#0b4f2c;">Gallery</h2>
        <button style="background:#0b4f2c;color:#fff;border:none;padding:8px 14px;border-radius:6px;font-size:12.5px;cursor:pointer;">+ New Album</button>
    </div>
    @forelse($albums as $album)
        <div style="border:1px solid #eee;border-radius:8px;padding:12px;margin-bottom:10px;">
            <strong style="color:#0b4f2c;">{{ $album->title }}</strong> <span style="font-size:11.5px;color:#777;">— {{ $album->images->count() }} photos</span>
            <div style="display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;">
                @foreach($album->images->take(6) as $img)
                    <img src="{{ asset('storage/' . $img->image_path) }}" style="width:60px;height:60px;object-fit:cover;border-radius:4px;">
                @endforeach
            </div>
        </div>
    @empty
        <p style="color:#999;font-size:13px;text-align:center;padding:20px 0;">No albums yet.</p>
    @endforelse
</div>
@endsection