<div>
    @section('title', 'Socios')

    <div class="container pt-2 d-flex flex-column">

        <header class="mb-4">
            <h1 class="text-center h1">Socios</h1>
        </header>

        <a class="btn btn-primary align-self-end mb-4" href="{{ route('socios.create') }}">Agregar</a>

        <x-modal-detalle-persona :persona="$detailData" modalTitle="{{ $modalTitle}}" />

        {{-- Contenido --}}
        <div class="row mt-3">
            <div class="card shadow p-0">
                <div class="card-header pb-2">
                    <div class="row">
                        <p class="col">
                            Cobros de mensualidades pendientes
                        </p>

                        <div class="col  d-flex flex-column align-items-end">
                            <input class="form-control list-search mw-300px d-none " wire:model.live="search"
                                type="search" placeholder="Buscar">

                        </div>

                    </div>
                </div>

                <div class="card-body ">
                    @include('livewire.socio.data-table')

                </div>
                {{-- <div class="d-flex justify-content-center">
        {{ $socios->links() }}
            </div> --}}
        </div>