<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2 mb-3">
    <h1 class="h3 mb-0">Listado de {{ $entityPluralLabel }}</h1>
    <div class="d-flex gap-2">
        <a href="{{ route('administracion.index') }}" class="btn btn-outline-secondary">Volver a Adm.</a>
        @if ($entity === 'tipos-insumos')
            <a class="btn btn-outline-primary" href="{{ route('administracion.crud.index', ['entity' => 'bienes']) }}">Volver a Bienes</a>
        @endif
        @if ($entity === 'bienes')
            <a class="btn btn-outline-secondary" href="{{ route('administracion.crud.index', ['entity' => 'tipos-insumos']) }}">Tipos de Bien</a>
        @endif
        @if (! ($isReadOnly ?? false))
            <a class="btn btn-outline-primary" href="{{ route('administracion.crud.import.form', ['entity' => $entity]) }}">Importar por Lote</a>
            <button class="btn btn-brand" type="button" id="openCreateModalBtn">Nuevo registro</button>
        @endif
    </div>
</div>

@if ($entity === 'bienes')
    @include('partials.scanner-hint', [
        'text' => 'Escanee el codigo del bien para buscarlo en el listado.',
        'className' => 'text-muted-brand small mb-3',
    ])
@endif

<form id="crudSearchForm" class="crud-card mb-3" method="GET" action="{{ route('administracion.crud.index', ['entity' => $entity]) }}" autocomplete="off">
    <div class="card-body p-3 d-flex flex-column flex-md-row gap-2 align-items-md-center">
        <div class="input-group">
            @if ($entity === 'bienes')
                <button class="btn btn-outline-secondary" type="button" title="Escanear código" id="scanBienBtn">
                    <img class="scanner-button-icon" src="{{ asset('imgs/scan_barcode.svg') }}" alt="" aria-hidden="true">
                </button>
            @endif
            <input
                id="crudSearchInput"
                type="text"
                class="form-control"
                name="q"
                value="{{ $search ?? '' }}"
                autocomplete="off"
                placeholder="{{ $searchPlaceholder ?? ('Buscar en ' . $entityPluralLabel) }}"
            >
        </div>
        <div class="d-flex flex-column flex-sm-row gap-2 ms-md-auto">
            <select class="form-select" name="per_page" onchange="this.form.submit()" aria-label="Resultados por pagina" style="min-width: 11rem;">
                @foreach ([10, 50, 100] as $pageSize)
                    <option value="{{ $pageSize }}" @selected(($perPage ?? 10) === $pageSize)>
                        {{ $pageSize }} por pagina
                    </option>
                @endforeach
            </select>
            <button class="btn btn-brand" type="submit">Buscar</button>
            <a class="btn btn-outline-secondary" href="{{ route('administracion.crud.index', ['entity' => $entity, 'per_page' => $perPage ?? 10]) }}">Limpiar</a>
        </div>
    </div>
</form>

@if (filled($search ?? ''))
    <p class="text-muted small mb-3">Buscando por: '{{ $search }}'</p>
@endif
