@extends('layouts.app')
@section('title', 'Teams')
@section('breadcrumb')
    <span style="font-weight:600;color:var(--text-primary);">Teams</span>
@endsection

@section('content')
    <div class="page-header">
        <div class="page-header-left">
            <h1>Teams</h1>
            <span class="badge badge-primary">{{ $teams->count() }}</span>
        </div>
        <div class="page-header-actions">
            <a href="{{ route('teams.create') }}" class="btn btn-primary">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                New Team
            </a>
        </div>
    </div>

    <div class="grid grid-3">
        @forelse($teams as $team)
            <a href="{{ route('teams.show', $team) }}" class="team-card" style="text-decoration:none;color:var(--text-primary);">
                <div class="team-card-header">
                    <div class="team-card-icon" style="background: {{ $team->color }};">
                        {{ strtoupper(substr($team->name, 0, 1)) }}
                    </div>
                    <div>
                        <div class="team-card-name">{{ $team->name }}</div>
                        <div class="team-card-dept">{{ $team->department ?? 'No Department' }}</div>
                    </div>
                </div>
                @if($team->description)
                    <p class="text-sm text-muted mb-3" style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">{{ $team->description }}</p>
                @endif
                <div class="team-card-stats">
                    <span>👥 {{ $team->members_count }} members</span>
                    <span>📁 {{ $team->projects_count }} projects</span>
                </div>
                <div class="mt-3">
                    <div class="avatar-stack">
                        @foreach($team->members->take(5) as $member)
                            <div class="avatar avatar-xs" title="{{ $member->name }}">{{ $member->initials }}</div>
                        @endforeach
                    </div>
                </div>
            </a>
        @empty
            <div class="empty-state" style="grid-column:1/-1;">
                <div class="empty-state-title">No teams yet</div>
                <div class="empty-state-text">Create your first team to organize your work.</div>
                <a href="{{ route('teams.create') }}" class="btn btn-primary">Create Team</a>
            </div>
        @endforelse
    </div>
@endsection