<!--
  templateType: error_page
  isAvailableForNewContent: true
  label: Server Error - 500
  screenshotPath: ../../images/template-previews/500.png
-->
{% extends "../layouts/base-system.html" %}

{% block title %}Server Error{% endblock %}
{% block description %}We're experiencing technical difficulties. Please try again later.{% endblock %}

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

{% block icon %}
  <div class="system-icon icon-error">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
      <line x1="12" y1="9" x2="12" y2="13"/>
      <line x1="12" y1="17" x2="12.01" y2="17"/>
    </svg>
  </div>
{% endblock %}

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

{% block page_title %}Something Went Wrong{% endblock %}

{% block page_message %}
  We're experiencing technical difficulties. Our team has been notified and is working to fix the issue. Please try again in a few moments.
{% endblock %}

{% block action_buttons %}
  <a href="javascript:location.reload()" class="btn btn-primary">Try Again</a>
  <a href="/" class="btn btn-secondary">Go to Homepage</a>
{% endblock %}

{% block additional_content %}
  <div class="system-contact">
    <p>If this problem persists, please contact our support team:</p>
    <p>
      {% if site_settings.company_email %}
        Email: <a href="mailto:{{ site_settings.company_email }}">{{ site_settings.company_email }}</a>
      {% endif %}
    </p>
  </div>
  
  <div class="system-section">
    <p style="font-size: 0.875rem; color: var(--color-text-secondary, #718096);">
      Error Reference: {{ request.id|default('Unknown') }}<br>
      Timestamp: {{ request.timestamp|datetimeformat('%Y-%m-%d %H:%M:%S UTC') }}
    </p>
  </div>
{% endblock %}