<form method="GET"  class="top-filter">
    <div class="filter-show">
        <label class="filter-label">Show :</label>
        <select class="form-select filter-select" name="limit" onchange="$(this).closest('form').submit()" id="limit-select">
            @foreach([12, 24, 36] as $limit)
                <option value="{{ $limit }}" {{ request('limit') == $limit ? 'selected' : '' }}>{{ $limit }}</option>
            @endforeach
        </select>

        <input type="hidden" name="page" value="1">
    </div>
    <div class="filter-short">
        <label class="filter-label">Short by :</label>
        <select class="form-select filter-select" id="sort-select" name="sort" onchange="$(this).closest('form').submit()">
            @foreach($filterOptions ?? [
                      ['Value' => 'mx.created_on desc', 'Caption' => '최신순'],
                      ['Value' => 'mx.created_on asc', 'Caption' => '역순'],
                  ] as $option)
                <option value="{{ $option['Value'] }}" {{ request('sort') == $option['Value'] ? 'selected' : '' }}>{{ $option['Caption'] }}</option>
            @endforeach
        </select>

    </div>
    {{ $slot }}

</form>
