@extends('layouts.portal')

@section('title', 'Subjects')

@section('page-header')
    <div class="mb-8">
        <h1 class="font-display text-2xl font-extrabold text-slate-900 sm:text-3xl">My Subjects</h1>
        <p class="mt-1 text-sm text-slate-500">{{ $child->class?->name ? 'Subjects offered in ' . $child->class->name . '.' : 'No class assigned yet.' }}</p>
    </div>
@endsection

@section('content')
    @if ($subjectList->isEmpty())
        <x-portal.empty message="No subjects yet. Subjects will appear here once the school assigns them to your class." />
    @else
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($subjectList as $subject)
                <div class="rounded-2xl border border-slate-100 bg-white p-5 shadow-sm shadow-slate-900/[0.03] transition hover:shadow-md">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <h3 class="truncate font-display text-sm font-bold text-slate-900">{{ $subject->name }}</h3>
                            <p class="mt-0.5 text-xs text-slate-400">{{ $subject->code ?? '—' }}</p>
                        </div>
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-accent-50 text-accent-600">
                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/></svg>
                        </span>
                    </div>
                    <div class="mt-4 border-t border-slate-100 pt-3 text-xs">
                        @if ($subject->teacher)
                            <p class="font-semibold text-slate-700">{{ $subject->teacher->name }}</p>
                            <p class="text-slate-400">Subject teacher</p>
                        @else
                            <p class="italic text-slate-400">Teacher to be assigned</p>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    @endif
@endsection