@once
  @push('scripts')
    <script>
      document.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('pre').forEach((el) => {
          hljs.highlightElement(el);
        });
      });
    </script>
  @endpush
@endonce
<x-slot name="title">
  {{ $faq->question }}
</x-slot>
<x-slot name="metaTags">
  <meta name="description" content="{{ $faq->description }}">
  @if ($faq->noindex && $faq->nofollow)
    <meta name="robots" content="noindex,nofollow">
  @elseif ($faq->noindex)
    <meta name="robots" content="noindex">
  @elseif ($faq->nofollow)
    <meta name="robots" content="nofollow">
  @endif
</x-slot>

<div>
  <div class="bg-white dark:bg-gray-900 rounded-md shadow p-6 relative isolate">
    <svg
      class="absolute inset-0 -z-10 opacity-50 h-full w-full stroke-gray-200 dark:stroke-gray-700 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
      aria-hidden="true">
      <defs>
        <pattern id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527" width="200" height="200" x="50%" y="-64" patternUnits="userSpaceOnUse">
          <path d="M100 200V.5M.5 .5H200" fill="none" />
        </pattern>
      </defs>
      <svg x="50%" y="-64" class="overflow-visible fill-gray-50 dark:fill-gray-900">
        <path d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M299.5 800h201v201h-201Z" stroke-width="0" />
      </svg>
      <rect width="100%" height="100%" stroke-width="0" fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" />
    </svg>
    <div class="mb-6">
      <h1 class="text-xl font-bold leading-6 text-gray-900 dark:text-gray-100">
        {{ $faq->question }}
      </h1>
      <div class="text-sm mt-2 flex gap-x-8 gap-y-2">
        <span>
          {{ __('From') }}:
          @forelse (($faq->faqCategories?->reverse() ?? []) as $category)
            <a href="{{ route('faqs.list', $category->slug) }}">{{ $category->name }}</a>
            {{ $loop->last ? '' : ', ' }}
          @empty
          @endforelse
        </span>
        <span>{{ __('Last Updated') }}: {{ $faq->updated_at->diffForHumans() }}</span>
      </div>
    </div>
    <div class="prose dark:prose-invert max-w-none">{{ parse_markdown($faq->answer) }}</div>
    @if ($faq->extra_attributes->isNotEmpty())
      <div class="mt-8 rounded-md border dark:border-gray-800 px-4 py-5 sm:px-6">
        <dl class="m-0 p-0 flex flex-col gap-x-4 gap-y-8">
          @foreach ($faq->extra_attributes as $key => $value)
            <div class="">
              <dt class="m-0 p-0 text-sm font-medium text-gray-600 dark:text-gray-400">{{ $key }}</dt>
              <dd class="p-0 m-0 text-sm text-gray-900 dark:text-gray-100">
                {{ filter_var($value, FILTER_VALIDATE_URL) !== false ? str('<div class="group inline-flex items-center gap-2"><a href="' . $value . '" target="_blank">' . $value . '</a><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 hidden group-hover:block">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                          </svg></div>')->toHtmlString() : $value }}
              </dd>
            </div>
          @endforeach
        </dl>
      </div>
    @endif
  </div>
</div>