@php
    use App\Support\ParentChildPresenter;
@endphp

@extends('layouts.parent')

@section('title', 'My Children · '.config('brand.name'))

@section('content')
    <div class="content">
        <x-admin.page-header
            kicker="My Family"
            title="My Children"
            meta="Click a child’s name to open their profile. Accounts you create are linked to you automatically."
        >
            <x-slot:actions>
                <a href="{{ route('parent.children.create') }}" class="btn btn-primary btn-md">Add child</a>
            </x-slot:actions>
        </x-admin.page-header>

        <div class="card mec-panel">
            <div class="card-body">
                <h5 class="mb-1">Linked children</h5>
                <p class="text-muted mb-4">Open a profile to see progress, homework and attendance for that child.</p>

                @forelse ($linkedChildren as $child)
                    @php
                        $signInEmail = ParentChildPresenter::signInEmail($child);
                        $relationship = ParentChildPresenter::relationshipLabel($child->pivot->relationship ?? 'guardian');
                        $activeLessons = (int) ($enrolmentCounts[$child->id] ?? 0);
                    @endphp
                    <div class="mec-child-row">
                        <p class="mec-child-row-name">
                            <a href="{{ route('parent.children.show', $child) }}" class="mec-inline-link">{{ $child->full_name }}</a>
                        </p>
                        <p class="mec-child-row-meta">
                            {{ $child->classLabel() }}
                            · {{ ParentChildPresenter::courseCountLabel($activeLessons) }}
                            · {{ $relationship }}
                        </p>
                        <p class="mec-child-row-access">
                            @if ($signInEmail)
                                {{ $signInEmail }}
                            @else
                                Sign-in not set yet
                            @endif
                            · <a href="{{ route('parent.children.show', $child) }}">View profile</a>
                        </p>
                    </div>
                @empty
                    <p class="mec-empty mb-3">No children yet. Add a child so they can sign in and learn.</p>
                    <a href="{{ route('parent.children.create') }}" class="btn btn-primary btn-sm">Add child</a>
                @endforelse

                @if ($linkedChildren->isNotEmpty())
                    <a href="{{ route('parent.children.create') }}" class="mec-inline-link">Add child</a>
                @endif
            </div>
        </div>
    </div>
@endsection