<!DOCTYPE html>
<html lang="en">
{{template "views/partials/head" .}}

<body class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">
<div class="app-layout">
  {{template "views/partials/navbar" .}}
  
  <main class="main-content">
    <div class="main-content-inner">

    <div class="container mx-auto px-4 py-8 flex-grow">
        <div class="bg-[var(--color-bg-secondary)] border border-[var(--color-border-subtle)] rounded-xl p-8 mb-10">
            <div class="max-w-4xl mx-auto text-center">
                <div class="mb-6 text-6xl text-[var(--color-primary)]">
                    <i class="fas fa-exclamation-circle"></i>
                </div>
                <h1 class="hero-title mb-4">
                    404 - Page Not Found
                </h1>
                <p class="text-xl text-[var(--color-text-secondary)] mb-6">The page you're looking for doesn't exist or has been moved</p>
                <div class="flex flex-wrap justify-center gap-2">
                    <a href="./" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
                        <i class="fas fa-home"></i>
                        <span>Return Home</span>
                    </a>
                    <a href="browse/" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
                        <i class="fas fa-images"></i>
                        <span>Browse Gallery</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="bg-[var(--color-bg-secondary)] border border-[var(--color-border-subtle)] rounded-xl p-8">
            <div class="text-center max-w-3xl mx-auto">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--color-warning-light)] border border-[var(--color-warning)]/20 mb-4">
                    <i class="text-[var(--color-warning)] text-2xl fa-solid fa-triangle-exclamation"></i>
                </div>
                <h2 class="text-2xl md:text-3xl font-semibold text-[var(--color-text-primary)] mb-4">Looking for resources?</h2>
                <p class="text-lg text-[var(--color-text-secondary)] mb-6">Visit our <a class="text-[var(--color-primary)] hover:text-[var(--color-accent)] underline underline-offset-2 transition-colors" href="browse">Gallery</a> or check the <a href="https://localai.io/basics/getting_started/" class="text-[var(--color-primary)] hover:text-[var(--color-accent)] underline underline-offset-2 transition-colors">Getting started documentation</a></p>
            </div>
        </div>
    </div>

    {{template "views/partials/footer" .}}
    </div>
  </main>
</div>

</body>
</html>
