<!--
  templateType: error_page
  isAvailableForNewContent: true
  label: Page Not Found - 404
  screenshotPath: ../../images/template-previews/404.png
-->
{% extends "../layouts/base-system.html" %}

{% block title %}Page Not Found{% endblock %}
{% block description %}The page you're looking for doesn't exist.{% endblock %}

{% block page_class %}page-error-404{% endblock %}

{% block icon %}
  <div class="system-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="10"/>
      <path d="M12 8v4m0 4h.01"/>
    </svg>
  </div>
{% endblock %}

{% block status_code %}
  <div class="system-code">404</div>
{% endblock %}

{% block page_title %}Page Not Found{% endblock %}

{% block page_message %}
  The page you're looking for doesn't exist. It might have been moved, deleted, or you may have typed the URL incorrectly.
{% endblock %}

{% block action_buttons %}
  <a href="/" class="btn btn-primary">Go to Homepage</a>
  <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
{% endblock %}

{% block additional_content %}
  <div class="system-section">
    <h3>Helpful Links</h3>
    <ul style="text-align: left; max-width: 300px; margin: 0 auto;">
      <li><a href="/products">Products</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/about">About Us</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
{% endblock %}