{% extends "layouts/app_shell.html" %}
{# In-app 404 — renders inside the authenticated shell so the user keeps
   their sidebar, persona badge, and logout context. Shipped as part of
   the #776 fix (cycle 219): before this existed, 404s inside /app/* fell
   through to site/404.html which rendered the public marketing chrome
   and told logged-in users to "Sign In".
   v0.62 CSS refactor: inline Tailwind → semantic .dz-error-* family
   (components/fragments.css) + .dz-button primitives. #}

{% block title %}Page Not Found - {{ app_name | default("Dazzle") }}{% endblock %}

{% block content %}
<div class="dz-error-page">
  <h1 class="dz-error-code">404</h1>
  <p class="dz-error-message">
    {{ message | default("The page you're looking for doesn't exist.") }}
  </p>
  {% if suggestions %}
  <div class="dz-error-suggestions-card">
    <p class="dz-error-suggestions-title">Did you mean:</p>
    <ul class="dz-error-suggestions-list">
      {% for sug in suggestions %}
      <li>
        <a href="{{ sug.url }}" class="dz-error-suggestion-link">
          <code class="dz-error-suggestion-url">{{ sug.url }}</code>
          <span>— {{ sug.label }}</span>
        </a>
      </li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}
  <div class="dz-error-actions">
    {% if back_url %}
    <a href="{{ back_url }}" class="dz-button dz-button-primary">
      <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
      </svg>
      {{ back_label | default("Back") }}
    </a>
    {% endif %}
    <a href="/app" class="dz-button dz-button-ghost">
      Go to Dashboard
    </a>
  </div>
</div>
{% endblock %}