{% extends "base.html" %}

{#
================================================================================
404 Error Page Template (Kida-Native)
================================================================================

Page not found error page.

KIDA FEATURES USED:
- {% let %} for template-scoped variables
- Optional chaining (?.) for null-safe access
- Null coalescing (??) for smart defaults
================================================================================
#}

{% block title %}Page Not Found - {{ config?.title ?? 'Site' }}{% end %}

{% block meta %}
<meta name="robots" content="noindex, nofollow">
{% end %}

{% block content %}
{# Template-scoped variables #}
{% let current_language = current_lang() %}
{% let main_menu = get_menu_lang('main', current_language) %}
{% let auto_nav = get_auto_nav() if main_menu | length == 0 else [] %}
{% let nav_items = main_menu if main_menu | length > 0 else auto_nav %}

<div class="container">
  <div class="empty-state">
    <div class="empty-state__code">404</div>

    {# Decorative icon #}
    <div class="empty-state__icon" aria-hidden="true">
      {{ icon('compass', size=120) }}
    </div>

    <h1 class="empty-state__title">Page Not Found</h1>
    <p class="empty-state__message">
      The page you're looking for doesn't exist or may have been moved.
    </p>

    <div class="empty-state__actions">
      <a href="{{ '/' | absolute_url }}" class="button button-light">
        {{ icon('house', size=16) }}
        <span>Go Home</span>
      </a>
    </div>

    {# Navigation suggestions #}
    {% if nav_items | length > 0 %}
    <div class="empty-state__suggestions">
      <h2>Quick Navigation</h2>
      <ul>
        {% for item in nav_items[:5] %}
        {% let item_href = item?.href ?? '#' %}
        {% let item_name = item?.name ?? 'Link' %}
        <li>
          <a href="{{ item_href | absolute_url }}">{{ item_name }}</a>
        </li>
        {% end %}
      </ul>
    </div>
    {% end %}

    {# Search hint #}
    <p class="empty-state__search-hint">
      Press <kbd>⌘</kbd><kbd>K</kbd> to search
    </p>
  </div>
</div>
{% end %}