@push('head')
@endpush

<div class="ppt4">
    <div class="container-fluid">
        <div class="d-block bg-theme-box rounded shadow-sm overflow-hidden mb-3">
            
            <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-4 py-4 px-3 px-md-4">
                <div class="d-flex align-items-center gap-4">
                    <img src="{{ url($admin->media()->first()->path) }}" alt="{{ $admin->username }}"
                        class="object-fit-cover rounded-circle" width="64" height="64">
                    <div class="d-block">
                        <span class="fw-bold fs-3">{{ $admin->username }}</span>
                        <p class="mb-0">{{ $admin->email }}</p>
                    </div>
                </div>
                <div>
                    <div class="row row-cols-3">
                        <div class="col d-flex gap-2 align-items-center">
                            <i class="fad fa-file-alt fa-lg"></i>
                            <div class="lh-sm">
                                <small class="mb-0 text-muted">Posts</small>
                                <p class="mb-0 fw-bold">328</p>
                            </div>
                        </div>
                        <div class="col d-flex gap-2 align-items-center">
                            <i class="fad fa-layer-group fa-lg"></i>
                            <div class="lh-sm">
                                <small class="mb-0 text-muted">Followers</small>
                                <p class="mb-0 fw-bold">937k</p>
                            </div>
                        </div>
                        <div class="col d-flex gap-2 align-items-center">
                            <i class="fad fa-wifi fa-lg"></i>
                            <div class="lh-sm">
                                <small class="mb-0 text-muted">Following</small>
                                <p class="mb-0 fw-bold">2,876</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <hr class="soft m-0">
            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link active rounded-0 px-4" data-bs-toggle="pill"
                        data-bs-target="#pills-profile" role="tab">Profile</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link rounded-0 px-4" data-bs-toggle="pill"
                        data-bs-target="#pills-address" role="tab">Alamat</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link rounded-0 px-4" data-bs-toggle="pill"
                        data-bs-target="#pills-disabled" role="tab">Disabled</button>
                </li>
            </ul>
        </div>

        <div class="d-block bg-theme-box rounded shadow-sm overflow-hidden">
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="pills-profile" role="tabpanel">
                    @livewire('account.profile.profile-admin-form', ['admin_id' => $admin['admin_id']])
                </div>
                <div class="tab-pane fade" id="pills-address" role="tabpanel">
                    @livewire('account.profile.profile-admin-address', ['admin_id' => $admin['admin_id']])
                </div>
                <div class="tab-pane fade" id="pills-disabled" role="tabpanel">...</div>
            </div>
        </div>

    </div>


    {{-- <div id="modalName" class="modal fade" tabindex="-1" aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-5">
                <div class="modal-header border-0 px-4 pt-4 pb-2">
                    <h5 class="modal-title fw-bold">Username</h5>
                    <button type="button" class="btn-close rounded-circle" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body px-4">
                    <p>Update your username. This change will apply to your account and be visible to others in your
                        interactions.</p>
                    <div class="form-floating">
                        <input type="email" class="form-control bg-body-tertiary" id="floatingInput"
                            wire:model.live="admin.username">
                        <label for="floatingInput">Email address</label>
                    </div>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-2">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Discard</button>
                    <button type="button" class="btn btn-primary">Confirm</button>
                </div>
            </div>
        </div>
    </div> --}}


</div>

@push('script')
@endpush