@props([
    'route',                // 폼 제출 경로
    'total' => 0,           // 총 건수
    'searchPlaceholder' => '검색어 입력',
])

<div class="search-filter-section mb-4">
    <form id="searchForm" method="GET" action="{{ $route }}">

        <!-- 상단 필터 및 검색 유닛 그룹 (align-items-end로 라벨 유무와 상관없이 아랫선 정렬) -->
		<div class="pc-only-section">
			<div class="d-flex flex-wrap align-items-end justify-content-end gap-2 mb-3">

				<!-- 페이지마다 다른 셀렉트박스, 체크박스, 옵션박스가 들어오는 자리 (Slot) -->
				@isset($filters)
					<div class="d-flex flex-wrap align-items-end gap-2">
						{{ $filters }}
					</div>
				@endisset
				
				<!-- 공통: 키워드 검색 입력창 -->
				<div>
					<label class="form-label text-muted small mb-1 d-block opacity-0" style="height: 1.2rem; pointer-events: none;">검색</label>
					<div style="width: 240px;">
						<div class="input-group input-group-sm">
							<input type="text" name="keyword" class="form-control" id="keywordInput"
								placeholder="{{ $searchPlaceholder }}"
								value="{{ request('keyword') }}">
							<button class="btn btn-secondary" type="submit" id="searchSubmitBtn">
								<i class="fa-solid fa-magnifying-glass"></i>
							</button>
						</div>
					</div>
				</div>

				<!-- 공통: 초기화 버튼 (다른 입력창들과 높이 라인을 맞추기 위한 라벨 스페이서 및 버튼 스타일 적용) -->
				<div>
					<label class="form-label text-muted small mb-1 d-block opacity-0" style="height: 1.2rem; pointer-events: none;">초기화</label>
					<a href="{{ $route }}" class="btn btn-outline-light text-secondary border btn-app-sm d-flex align-items-center justify-content-center" style="height: 31px; width: 31px;" title="검색 초기화">
						<i class="fa-solid fa-rotate-left"></i>
					</a>
				</div>
			</div>
		</div>			

		<!-- 모바일 전용 단어 검색 -->
		<div class="mobile-only-section">
			<div class="input-group">
				<span class="input-group-text bg-light border-end-0"><i
						class="fa-solid fa-magnifying-glass text-muted"></i></span>
				<input type="text" name="keyword" class="form-control border-start-0 ps-0"
					placeholder="샵 이름, 대표자명, 주소 검색" value="{{ request('keyword') }}">
				<button type="submit" class="btn btn-sm btn-dark px-3">검색</button>
			</div>
		</div>

        <!-- 하단: 총 건수 및 건수별 보기 (공통 유지) -->
        <div class="d-flex justify-content-between align-items-center pt-2 border-top border-light">
            <span class="text-muted small">
                총 <strong class="text-dark">{{ $total }}</strong>개의 항목
            </span>

            <div class="pc-only-section">
                <div class="d-flex align-items-center gap-1">
                    <select name="per_page" id="perPageSelect" class="form-select form-select-sm" style="width: 110px; font-size: 0.8rem;" onchange="this.form.submit()">
                        <option value="15" {{ request('per_page', 15) == 15 ? 'selected' : '' }}>15개씩</option>
                        <option value="30" {{ request('per_page') == 30 ? 'selected' : '' }}>30개씩</option>
                        <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50개씩</option>
                        <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100개씩</option>
                    </select>
                </div>
            </div>
        </div>
    </form>
</div>