<div>
@php
    $modalStyle="";
    $modalStatus='';
       if($isOpen) {
          $modalStatus= 'show';
          $modalStyle="display: block;";
       }
@endphp


    <x-adminlte-modal id="searchModalBirthBasic" class="{{ $modalStatus }}" style="{{ $modalStyle }}" size="lg"
                      title="" v-centered static-backdrop scrollable>

        <div class="modal-body">
           <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                    @if($role->hasAnyPermission(["Basic View Birth Details"]))
                        <li class="nav-item">
                            @if($modalStatus)
                                <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>
                            @else
                                <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">
                                    <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                                </a>
                            @endif
                        </li>
                    @endif

                    @if($role->hasAnyPermission(["Basic View Birth Family relations"]))
                        <li class="nav-item">
                            @if($modalStatus)
                                <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-family"
                                   aria-selected="false">
                                    Family relations
                                </a>
                            @else
                                <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-family" aria-selected="false">
                                    <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                                </a>
                            @endif
                        </li>
                    @endif

                    @if($role->hasAnyPermission(["Basic View Birth Documents"]))
                        <li class="nav-item">
                            @if($modalStatus)
                                <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-documents"
                                   aria-selected="false">
                                    Documents</a>
                            @else
                                <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-family" aria-selected="false">
                                    <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                                </a>
                            @endif
                        </li>
                    @endif

                    @if($role->hasAnyPermission(["Basic View Birth History"]))
                        <li class="nav-item">
                            @if($modalStatus)
                                <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-history"
                                   aria-selected="false">
                                    Document History</a>
                            @else
                                <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-family" aria-selected="false">
                                    <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                                </a>
                            @endif
                        </li>
                    @endif
                    <li class="nav-item">
                        @if($modalStatus)
                            <a class="nav-link" id="custom-tabs-four-history-tab" data-toggle="pill"
                               href="#custom-tabs-four-death" role="tab" aria-controls="custom-tabs-four-death"
                               aria-selected="false">
                                Date of Death
                            </a>
                        @else
                            <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-family" aria-selected="false">
                                <div class="skeleton skeleton-text short" style="width: 10rem;"></div>
                            </a>
                        @endif
                    </li>
                </ul>
        </div>

        <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">
                    @if($role->hasAnyPermission(["Basic View Birth Details"]))
                        <div class="tab-pane fade show active" id="custom-tabs-four-home" role="tabpanel"
                             aria-labelledby="custom-tabs-four-home-tab">
                            @include('livewire.search.partials.tabs.birth.document_data')
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <x-slot name="footerSlot">
            <x-adminlte-button theme="danger" label="Close" data-dismiss="modal" wire:click="$refresh"/>
        </x-slot>

    </x-adminlte-modal>

    <style>
        #searchModalBirthBasic  > .modal-dialog{
            max-width: 95vw;
            margin: auto;
        }
    </style>
</div>
