@extends('layouts.app')

@section('content')
<div class="grid grid-cols-1 gap-6 lg:grid-cols-[280px_1fr]">
    <aside class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft">
        <div class="border-b border-slate-200 bg-gradient-to-br from-ink-900 to-brand-700 p-5 text-white">
            <div class="text-sm font-semibold">Portal Siswa</div>
            <div class="text-xs text-white/70">Riwayat &amp; Statistik</div>
        </div>
        <nav class="p-3 space-y-1">
            <a href="{{ route('siswa.dashboard') }}" class="block rounded-xl px-4 py-3 text-sm font-semibold transition {{ request()->routeIs('siswa.dashboard') ? 'bg-ink-50 text-ink-800 ring-1 ring-ink-200' : 'text-slate-700 hover:bg-slate-50' }}">
                Dashboard
            </a>
            <a href="{{ route('siswa.password.edit') }}" class="block rounded-xl px-4 py-3 text-sm font-semibold transition {{ request()->routeIs('siswa.password.*') ? 'bg-ink-50 text-ink-800 ring-1 ring-ink-200' : 'text-slate-700 hover:bg-slate-50' }}">
                Ubah Password
            </a>
        </nav>
    </aside>

    <section class="min-w-0">
        <div class="mb-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Absensi Siswa</div>
                    <div class="text-lg font-bold text-slate-900">@yield('page-title', 'Dashboard')</div>
                </div>
                <div class="flex items-center gap-2">
                    @yield('page-actions')
                </div>
            </div>
        </div>

        @yield('siswa-content')
    </section>
</div>
@endsection