@extends('layouts.app')
@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
    <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold mb-3 sm:mb-4 text-center sm:text-left">{{ $aparatur->nama }}</h1>
    @if($aparatur->foto)
        <img src="{{ asset($aparatur->foto) }}" alt="{{ $aparatur->nama }}" class="rounded-lg mb-4 sm:mb-6 w-full h-48 sm:h-64 lg:h-96 object-cover shadow-md mx-auto">
    @else
        <div class="rounded-lg mb-4 sm:mb-6 w-full h-48 sm:h-64 lg:h-96 bg-gray-200 flex items-center justify-center mx-auto">
            <i class="fas fa-user text-gray-400 text-4xl sm:text-6xl"></i>
        </div>
    @endif
    <div class="mb-4 sm:mb-6 text-gray-500 text-sm sm:text-base flex items-center justify-center sm:justify-start gap-2 sm:gap-4">
        <span class="flex items-center gap-1"><i class="fas fa-user-tie"></i> {{ $aparatur->jabatan }}</span>
    </div>
    <div class="text-center sm:text-left">
        <a href="{{ route('aparatur.list') }}" class="inline-flex items-center gap-2 text-[#1dbf4a] hover:text-[#0f9d58] font-semibold text-sm sm:text-base">
            <i class="fas fa-arrow-left"></i>
            Kembali ke Daftar Aparatur
        </a>
    </div>
</div>
@endsection