@php
  $landingPages = config('profile.landing_pages', []);
  $currentLanding = old('default_landing_page', $user->default_landing_page ?? 'dashboard');
  $theme = old('theme_preference', $user->theme_preference ?? 'system');
  $ipp = old('items_per_page', $user->items_per_page ?? 25);
@endphp
<div class="dp">
  <p class="font-bold text-slate-900 mb-1"><i class="fa-solid fa-sliders text-blue-600 mr-2"></i>Preferences</p>
  <p class="text-slate-500 text-[12px] mb-4">Personal display defaults. Theme preference is stored for future UI themes.</p>
  <form action="{{ route('profile.preferences.update') }}" method="post" class="grid grid-cols-1 md:grid-cols-2 gap-4">@csrf @method('PUT')
    <div>
      <label class="fl">Theme</label>
      <select class="fi" name="theme_preference">
        @foreach(['system'=>'System','light'=>'Light','dark'=>'Dark'] as $v=>$l)
          <option value="{{ $v }}" @selected($theme===$v)>{{ $l }}</option>
        @endforeach
      </select>
    </div>
    <div>
      <label class="fl">Default page after login</label>
      <select class="fi" name="default_landing_page">
        @foreach($landingPages as $routeName => $label)
          <option value="{{ $routeName }}" @selected($currentLanding===$routeName)>{{ $label }}</option>
        @endforeach
      </select>
      <p class="text-[11px] text-slate-400 mt-1">Applied when your login flow supports custom redirects.</p>
    </div>
    <div>
      <label class="fl">Items per page</label>
      <select class="fi" name="items_per_page">
        @foreach([10,25,50,100] as $n)
          <option value="{{ $n }}" @selected((int)$ipp===$n)>{{ $n }}</option>
        @endforeach
      </select>
    </div>
    <div class="md:col-span-2 flex items-start gap-2">
      <input type="hidden" name="compact_mode" value="0">
      <input type="checkbox" name="compact_mode" value="1" id="pf_compact" class="rounded mt-1" @checked(old('compact_mode', $user->compact_mode ?? false))>
      <label for="pf_compact" class="text-[13px] text-slate-700">Compact tables where the UI supports it</label>
    </div>
    <div class="md:col-span-2"><button type="submit" class="bp"><i class="fa-solid fa-check mr-2"></i>Save preferences</button></div>
  </form>
</div>