@extends('layouts.app')
@section('title', __('My team'))
@section('content')
<section class="panel-card mb-5 p-5 sm:p-7">
    <p class="text-xs font-bold uppercase tracking-widest text-blue-700">{{ __('Employee team') }}</p>
    <h2 class="mt-1 text-2xl font-extrabold text-slate-900">{{ $department?->name ?? __('No team assigned') }}</h2>
    @if($department)
        <p class="mt-2 text-sm text-slate-500">{{ __('Your department team members') }} · {{ $employees->total() }}</p>
    @else
        <p class="mt-2 text-sm text-slate-500">{{ __('Ask an administrator to assign you to a department team.') }}</p>
    @endif
</section>

<section class="panel-card overflow-hidden">
    <div class="table-scroll">
        <table class="w-full text-left text-sm">
            <thead class="bg-slate-50 text-xs font-bold uppercase text-slate-400">
                <tr>
                    <th class="px-5 py-3">{{ __('Employee name') }}</th>
                    <th class="px-5 py-3">{{ __('Employee ID') }}</th>
                    <th class="px-5 py-3">{{ __('Phone number') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($employees as $employee)
                    <tr>
                        <td class="px-5 py-4 font-semibold text-slate-800">{{ $employee->user->name }}</td>
                        <td class="px-5 py-4 text-slate-600">{{ $employee->user->member_id }}</td>
                        <td class="px-5 py-4">
                            @if($employee->phone)
                                <a href="tel:{{ $employee->phone }}" class="font-medium text-blue-700 hover:text-blue-900">{{ $employee->phone }}</a>
                            @else
                                <span class="text-slate-400">—</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="px-5 py-12 text-center text-sm text-slate-400">{{ __('No active employees are assigned to this team yet.') }}</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="border-t border-slate-100 px-5 py-4">{{ $employees->links() }}</div>
</section>
@endsection