@extends('simaju.layouts.main')
@section('title', 'Detail Mapel')
@section('content')
<div class="max-w-3xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
        <div class="flex items-center justify-between">
            <div><h2 class="font-heading font-bold text-xl">{{ $mapel->nama_mapel }}</h2><p class="text-gray-500">{{ $mapel->kode_mapel }}</p></div>
            <a href="{{ route('simaju.mapel.index') }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50">Kembali</a>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <dl class="space-y-3">
            <div class="flex"><dt class="w-32 text-gray-500">Kategori</dt><dd><span class="px-2 py-1 text-xs rounded-full {{ $mapel->kategori_badge_class }}">{{ $mapel->kategori_label }}</span></dd></div>
            <div class="flex"><dt class="w-32 text-gray-500">Semester</dt><dd>{{ ucfirst($mapel->semester) }}</dd></div>
            <div class="flex"><dt class="w-32 text-gray-500">Jam/Minggu</dt><dd>{{ $mapel->jam_per_minggu }} JP</dd></div>
        </dl>
    </div>
</div>
@endsection