@extends('layouts.app')
@section('title', 'Departments')
@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;">Departments</h2>
        <button style="background:#0b4f2c;color:#fff;border:none;padding:8px 14px;border-radius:6px;font-size:12.5px;cursor:pointer;">+ Add Department</button>
    </div>
    @forelse($departments as $dept)
        <div style="border:1px solid #eee;border-radius:8px;padding:12px;margin-bottom:10px;">
            <strong style="color:#0b4f2c;">{{ $dept->name }}</strong>
            <div style="font-size:12.5px;color:#666;margin-top:4px;">{{ $dept->teachers->pluck('user.name')->filter()->join(', ') ?: 'No staff assigned yet' }}</div>
        </div>
    @empty
        <p style="color:#999;font-size:13px;text-align:center;padding:20px 0;">No departments set up yet.</p>
    @endforelse
</div>
@endsection