{{--
    Sortable column header, matching ProductsTable.vue: the .order span renders
    the twin triangles, and .asc / .desc highlights the active direction.

    $field  column to sort by
    $label  header text
--}}
@php
    $currentSort = request('sort');
    $currentDir  = strtolower(request('dir')) === 'desc' ? 'desc' : 'asc';
    $isActive    = $currentSort === $field;
    $nextDir     = ($isActive && $currentDir === 'asc') ? 'desc' : 'asc';
@endphp
<th style="cursor:pointer;"
    onclick="window.location='{{ request()->fullUrlWithQuery(['sort' => $field, 'dir' => $nextDir, 'page' => 1]) }}'">
    {{ $label }}
    <span class="order {{ $isActive ? $currentDir : '' }}"></span>
</th>