@extends('layouts.app')

@section('title', 'Team - ' . config('app.name'))

@section('content')
    <div class="mb-8 flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-semibold mb-2">Team</h2>
            <p class="text-[#706f6c] dark:text-[#A1A09A]
                Manage your team members
            </p>
        </div>
        <button class="px-5 py-2.5 bg-white dark:bg-[#161615] text-white dark:text-[#1b1b18] border border-[#1b1b18] hover:bg-[#FDFDFC] dark:bg-[#0a0a0a] rounded-sm text-sm font-medium transition-all">
            Invite Member
        </button>
    </div>

    <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg overflow-hidden">
        @php
            $team = [
                ['name' => 'John Doe', 'email' => 'john@example.com', 'role' => 'Admin'],
                ['name' => 'Jane Smith', 'email' => 'jane@example.com', 'role' => 'Developer'],
                ['name' => 'Bob Johnson', 'email' => 'bob@example.com', 'role' => 'Designer'],
                ['name' => 'Alice Williams', 'email' => 'alice@example.com', 'role' => 'Developer'],
            ];
        @endphp

        <div class="divide-y divide-[#e3e3e0]
            @foreach($team as $member)
                <div class="p-4 flex items-center justify-between hover:bg-white dark:bg-[#161615]
                    <div class="flex items-center gap-4">
                        <div class="w-10 h-10 bg-[#e3e3e0] rounded-full flex items-center justify-center font-medium">
                            {{ substr($member['name'], 0, 1) }}
                        </div>
                        <div>
                            <p class="font-medium">{{ $member['name'] }}</p>
                            <p class="text-sm text-[#706f6c] dark:text-[#A1A09A] $member['email'] }}</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-4">
                        <span class="text-sm px-3 py-1 bg-[#e3e3e0] rounded-sm">{{ $member['role'] }}</span>
                        <button class="text-sm text-[#706f6c] dark:text-[#A1A09A] hover:text-[#1b1b18] dark:text-[#EDEDEC]
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection