@extends('layouts.admin')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="fw-bold text-dark m-0">Kelola Struktur Pemerintahan</h3>
        <p class="text-muted small mb-0">Manajemen data aparat dan perangkat pemerintahan Desa Kadumbul.</p>
    </div>
    <button class="btn btn-success fw-bold" data-bs-toggle="modal" data-bs-target="#modalTambah"><i class="fa-solid fa-plus me-2"></i>Tambah Aparat</button>
</div>

<div class="card border-0 shadow-sm rounded-3">
    <div class="card-body p-0">
        <div class="table-responsive">
        <table class="table table-striped table-hover align-middle mb-0 small">
            <thead class="table-dark">
                <tr>
                    <th width="60px" class="text-center">No</th>
                    <th>Nama Perangkat Desa</th>
                    <th>Jabatan Resmi</th>
                    <th width="140px" class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="text-center fw-bold">1</td>
                    <td class="fw-semibold text-success">Yohanis Landu</td>
                    <td>Kepala Desa Kadumbul</td>
                    <td class="text-center">
                        <button class="btn btn-sm btn-warning text-white px-2 py-1 me-1"><i class="fa-solid fa-pen-to-square"></i></button>
                        <button class="btn btn-sm btn-danger px-2 py-1" onclick="alert('Terhapus!')"><i class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>
</div>
@endsection