@extends('layouts.app')

@section('content')
<div class="flex items-center justify-between gap-3">
    <div>
        <h1 class="text-xl font-semibold">Albums</h1>
        <p class="text-sm text-slate-400 mt-1">Buat & kelola album untuk foto private.</p>
    </div>
    <a href="{{ route('albums.create') }}" class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-sm font-semibold">New Album</a>
</div>

<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-5">
    @forelse($albums as $album)
        <a href="{{ route('albums.show', $album) }}" class="block p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-slate-700">
            <div class="font-semibold">{{ $album->name }}</div>
            <div class="text-sm text-slate-400 mt-1 line-clamp-2">{{ $album->description }}</div>
            <div class="text-xs text-slate-500 mt-3">{{ $album->images_count }} foto</div>
        </a>
    @empty
        <div class="text-sm text-slate-400">Belum ada album.</div>
    @endforelse
</div>

<div class="mt-6">{{ $albums->links() }}</div>
@endsection