@foreach($humans as $human)
    <x-adminlte-modal id="searchModalBasic" size="lg" title="ID#: {{ $human->o_pid ?? '-'}}" v-centered static-backdrop scrollable>
        <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="custom-tabs-four-home-tab" data-toggle="pill" href="#custom-tabs-four-home" role="tab" aria-controls="custom-tabs-four-home" aria-selected="true">
                    Document data
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" id="custom-tabs-four-family-tab" data-toggle="pill" href="#custom-tabs-four-family" role="tab" aria-controls="custom-tabs-four-profile" aria-selected="false">
                    Family relatio
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" id="custom-tabs-four-history-tab" data-toggle="pill" href="#custom-tabs-four-documents" role="tab" aria-controls="custom-tabs-four-messages" aria-selected="false">
                    Documents
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" id="custom-tabs-four-history-tab" data-toggle="pill" href="#custom-tabs-four-history" role="tab" aria-controls="custom-tabs-four-messages" aria-selected="false">
                    History
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" id="custom-tabs-four-photo-tab" data-toggle="pill" href="#custom-tabs-four-photo" role="tab" aria-controls="custom-tabs-four-settings" aria-selected="false">
                    Photo & signature
                </a>
            </li>
        </ul>
        <div class="card card-primary card-outline card-outline-tabs" style="box-shadow: none;">
            <div class="card-header p-0 border-bottom-0">
            </div>
            <div class="card-body">
                <div class="tab-content" id="custom-tabs-four-tabContent">

                    <div class="tab-pane fade show active" id="custom-tabs-four-home" role="tabpanel" aria-labelledby="custom-tabs-four-home-tab">
                        @include('search.partials.tabs.id.document_data')
                    </div>
                    <div class="tab-pane fade" id="custom-tabs-four-family" role="tabpanel" aria-labelledby="custom-tabs-four-family-tab">
                        @include('search.partials.tabs.id.family_relation')
                    </div>
                    <div class="tab-pane fade" id="custom-tabs-four-documents" role="tabpanel" aria-labelledby="custom-tabs-four-documents-tab">

                    </div>
                    <div class="tab-pane fade" id="custom-tabs-four-history" role="tabpanel" aria-labelledby="custom-tabs-four-history-tab">

                    </div>
                    <div class="tab-pane fade" id="custom-tabs-four-photo" role="tabpanel" aria-labelledby="custom-tabs-four-photo-tab">

                    </div>

                </div>
            </div>
        </div>
        <x-slot name="footerSlot">
            <x-adminlte-button theme="danger" label="Close" data-dismiss="modal"/>
        </x-slot>
    </x-adminlte-modal>
@endforeach
