@extends('siswa.layout')

@section('content')

<div class="max-w-4xl mx-auto space-y-8">

    <div class="bg-white rounded-2xl shadow p-8 flex gap-8 items-center">

        <!-- FOTO -->
        <img
            src="{{ $student->photo
                ? (str_starts_with($student->photo, 'http')
                    ? $student->photo
                    : asset('uploads/'.$student->photo))
                : 'https://ui-avatars.com/api/?name='.urlencode($student->name) }}"
            class="w-32 h-32 rounded-full object-cover border-4 border-slate-200"
        >

        <!-- INFO -->
        <div class="space-y-2">
            <h1 class="text-3xl font-bold text-slate-800">
                {{ $student->name }}
            </h1>

            <p class="text-slate-600 flex items-center gap-2">
                <i data-lucide="id-card" class="w-4 h-4"></i>
                NISN: {{ $student->nisn }}
            </p>

            <p class="text-slate-600 flex items-center gap-2">
                <i data-lucide="users" class="w-4 h-4"></i>
                Kelas: {{ $student->studentClass->name ?? '-' }}
            </p>

            <p class="text-slate-600 flex items-center gap-2">
                <i data-lucide="briefcase" class="w-4 h-4"></i>
                Jurusan: {{ $student->department->name ?? '-' }}
            </p>

            <div class="pt-4 flex gap-3">
                <a href="{{ route('siswa.password.edit') }}"
                   class="px-5 py-2 rounded-lg bg-slate-900 text-white
                          hover:bg-slate-700 transition inline-flex items-center gap-2">
                    <i data-lucide="key" class="w-4 h-4"></i>
                    Ubah Password
                </a>
            </div>
        </div>
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    lucide.createIcons();
});
</script>

@endsection