@extends('layouts.repository')

@section('title', 'All Communities')

@section('content')
<div class="bg-primary/5 border-b border-primary/10 py-12">
    <div class="container mx-auto px-4">
        <div class="flex items-center gap-3 text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">
            <a href="{{ url('/') }}" class="hover:text-primary transition-colors">Home</a>
            <span class="material-icons text-sm">chevron_right</span>
            <span class="text-primary">Communities</span>
        </div>
        <h1 class="text-3xl font-black tracking-tight text-slate-800 mb-2">Communities & Collections</h1>
        <p class="text-slate-500 font-medium">Browse research output organised by academic faculty and department.</p>
    </div>
</div>

<div class="container mx-auto px-4 py-12">

    <!-- Stats Bar -->
    <div class="grid grid-cols-3 gap-6 mb-16">
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 text-center hover-lift">
            <p class="text-4xl font-black text-primary mb-1">{{ $communities->count() }}</p>
            <p class="text-[10px] font-black uppercase tracking-widest text-slate-400">Communities</p>
        </div>
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 text-center hover-lift">
            <p class="text-4xl font-black text-primary mb-1">{{ $communities->sum('collections_count') }}</p>
            <p class="text-[10px] font-black uppercase tracking-widest text-slate-400">Collections</p>
        </div>
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 text-center hover-lift">
            <p class="text-4xl font-black text-emerald-500 mb-1">Open</p>
            <p class="text-[10px] font-black uppercase tracking-widest text-slate-400">Access Policy</p>
        </div>
    </div>

    <!-- Communities Grid -->
    <div class="space-y-6">
        @forelse($communities as $community)
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden hover:shadow-xl hover:shadow-primary/5 transition-all group">
                <div class="flex flex-col md:flex-row">
                    <!-- Icon Band -->
                    <div class="md:w-28 bg-primary/5 border-r border-primary/10 flex items-center justify-center p-8">
                        <div class="w-16 h-16 bg-primary/10 group-hover:bg-primary rounded-2xl flex items-center justify-center transition-colors">
                            <span class="material-icons text-primary group-hover:text-white text-3xl transition-colors">account_balance</span>
                        </div>
                    </div>
                    <!-- Content -->
                    <div class="flex-grow p-8">
                        <div class="flex items-start justify-between flex-wrap gap-4">
                            <div>
                                <a href="{{ route('communities.show', $community->slug) }}" class="block text-xl font-black text-slate-800 group-hover:text-primary transition-colors mb-2 leading-tight">
                                    {{ $community->name }}
                                </a>
                                <p class="text-sm text-slate-500 font-medium leading-relaxed max-w-xl">
                                    {{ $community->short_description }}
                                </p>
                            </div>
                            <div class="flex items-center gap-6 flex-shrink-0">
                                <div class="text-center">
                                    <p class="text-3xl font-black text-slate-800">{{ $community->collections_count }}</p>
                                    <p class="text-[9px] font-black uppercase tracking-widest text-slate-400">Collections</p>
                                </div>
                                <a href="{{ route('communities.show', $community->slug) }}" class="w-12 h-12 rounded-full bg-slate-100 group-hover:bg-primary text-slate-400 group-hover:text-white flex items-center justify-center transition-all">
                                    <span class="material-icons text-sm group-hover:translate-x-1 transition-transform">arrow_forward</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="bg-white p-20 rounded-3xl border-2 border-dashed border-slate-100 text-center">
                <span class="material-icons text-slate-200 text-6xl mb-4">account_balance</span>
                <p class="text-slate-400 font-bold uppercase tracking-widest text-xs">No communities found</p>
            </div>
        @endforelse
    </div>
</div>
@endsection