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

{% block title %}Access Denied{% endblock %}
{% block description %}You don't have permission to access this resource.{% endblock %}

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

{% block icon %}
  <div class="system-icon icon-warning">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <rect x="3" y="11" width="18" height="10" rx="2" ry="2"/>
      <path d="M7 11V7a5 5 0 0110 0v4"/>
    </svg>
  </div>
{% endblock %}

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

{% block page_title %}Access Denied{% endblock %}

{% block page_message %}
  Sorry, you don't have permission to access this page. This might be because you need to be logged in or you don't have the necessary privileges.
{% endblock %}

{% block action_buttons %}
  {% if request.contact %}
    <a href="/" class="btn btn-primary">Go to Homepage</a>
    <a href="/dashboard" class="btn btn-secondary">Go to Dashboard</a>
  {% else %}
    <a href="{{ request.login_url }}" class="btn btn-primary">Sign In</a>
    <a href="/" class="btn btn-secondary">Go to Homepage</a>
  {% endif %}
{% endblock %}

{% block additional_content %}
  <div class="system-section">
    <p style="font-size: 0.875rem; color: var(--color-text-secondary, #718096);">
      If you believe you should have access to this page, please contact your administrator.
    </p>
  </div>
{% endblock %}