{{-- APP UI元素設定 列表控制列：每頁筆數下拉（左）+ 搜尋欄/重置（右）。一般 GET 表單（非 AJAX）。
     用法：<x-app-list-controls :route="route('admin.app.ui-elements')" :perPage="$perPage" :search="$search" :placeholder="__('...')" /> --}}
@props([
    'route' => '',
    'perPage' => 10,
    'search' => '',
    'placeholder' => '',
])

<form method="GET" action="{{ $route }}" class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
        <span>{{ __('Show') }}</span>
        <select name="per_page" onchange="this.form.submit()" class="luxury-input py-1.5 pl-3 pr-8 text-sm w-auto cursor-pointer">
            @foreach([10, 25, 50, 100] as $n)
                <option value="{{ $n }}" {{ (int)$perPage === $n ? 'selected' : '' }}>{{ $n }}</option>
            @endforeach
        </select>
        <span>{{ __('entries') }}</span>
    </div>
    <div class="flex items-center gap-2">
        <input type="text" name="search" value="{{ $search }}" placeholder="{{ $placeholder ?: __('Search...') }}" class="luxury-input py-2 px-3 text-sm sm:w-72">
        <button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95" title="{{ __('Search') }}">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
        </button>
        <a href="{{ $route }}" class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95" title="{{ __('Reset') }}">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
        </a>
    </div>
</form>