@extends('layouts.app')

@section('content')
<div class="flex gap-6">
  <aside class="w-64 shrink-0 hidden md:block">
    @include('help.partials._sidebar', ['topics' => $topics, 'slug' => $slug])
  </aside>

  <main class="flex-1">
    <div class="flex items-center justify-between mb-4">
      <nav class="flex items-center gap-2 text-sm text-gray-500">
        <a href="{{ route('help.index') }}" class="hover:underline">Docs &amp; Guides</a>
        <span>/</span>
        <span class="text-gray-700">{{ $title }}</span>
      </nav>
      <div class="flex items-center gap-2">
        <a href="{{ route('help.index') }}" class="text-sm text-gray-500 hover:underline">All topics</a>
        <button type="button" onclick="window.print()" class="px-2 py-1 text-sm border rounded hover:bg-gray-50">Print</button>
      </div>
    </div>

    @php($partial = "help.pages.$slug")

    <article class="prose max-w-none">
      @includeWhen(View::exists($partial), $partial, ['topics' => $topics])
      @unless(View::exists($partial))
        <div class="rounded border p-4 bg-yellow-50 text-yellow-800">
          This topic hasn’t been written yet. Please check back later.
        </div>
      @endunless
    </article>

    @php
      $keys = array_keys($topics ?? []);
      $idx  = array_search($slug ?? '', $keys, true);
      $prev = ($idx !== false && $idx > 0) ? $keys[$idx - 1] : null;
      $next = ($idx !== false && $idx < count($keys) - 1) ? $keys[$idx + 1] : null;
    @endphp

    <div class="flex justify-between mt-8">
      <div>
        @isset($prev)
          <a href="{{ route('help.show', $prev) }}" class="inline-flex items-center gap-1 text-sm text-blue-600 hover:underline">
            <x-lucide-arrow-left class="w-4 h-4" /> {{ $topics[$prev] }}
          </a>
        @endisset
      </div>
      <div>
        @isset($next)
          <a href="{{ route('help.show', $next) }}" class="inline-flex items-center gap-1 text-sm text-blue-600 hover:underline">
            {{ $topics[$next] }} <x-lucide-arrow-right class="w-4 h-4" />
          </a>
        @endisset
      </div>
    </div>
  </main>
</div>
@endsection