---
// Branded 404 page. Astro emits it as 404.html; the Vercel adapter already
// routes every unmatched URL to /404.html with a 404 status.
// Excluded from sitemap.xml.ts and absent from docs.json on purpose.
import DocsLayout from '@layouts/DocsLayout.astro'
import Illustration from '@ui/Illustration.astro'
import Icon from '@ui/Icon.astro'
---

<DocsLayout title="Page not found" summary="The page you are looking for does not exist or has been moved." description="The page you are looking for does not exist. Browse the Tabler documentation sections or use the search." hidePagination url="/404" editPath="docs/pages/404.astro">
  <div class="py-4" aria-hidden="true">
    <Illustration image="not-found.svg" class="d-block mx-auto mw-100" height={240} />
  </div>

  <p>The link may be broken, or the page may have been moved. Try searching the documentation or go back to the homepage.</p>

  <div class="btn-list justify-content-center mt-6">
    <a href="/" class="btn">
      <Icon name="arrow-left" />
      Back to homepage
    </a>
    <button type="button" class="btn btn-primary" id="docs-404-search">
      <Icon name="search" />
      Search the docs
    </button>
  </div>
</DocsLayout>

<script>
  // Forward the CTA to the sidebar search input — clicking it lazy-loads
  // DocSearch and opens the modal (see DocsSearch.astro). When search is
  // disabled (no DOCSEARCH_* env), that input is hidden and the CTA follows.
  const searchInput = document.getElementById('docs-search-input')
  const searchButton = document.getElementById('docs-404-search')
  if (searchButton) {
    if (searchInput && !searchInput.closest('.docs-search')?.classList.contains('d-none')) {
      searchButton.addEventListener('click', () => searchInput.click())
    } else {
      searchButton.classList.add('d-none')
    }
  }
</script>