<!--
  templateType: none
-->
{#
  System Page Base Layout — single source of truth for all system pages (error + membership).

  This EXTENDS the theme's real base.html. That is deliberate and load-bearing:
  get_asset_url() / require_css() only resolve on system pages (incl. /_hcms/mem/*) when the
  template extends the standard base layout — a standalone <html> doc gets an empty
  get_asset_url, so no CSS loads (that was the long-standing "unstyled login page" bug).
  Verified against the upthegame theme, whose membership login loads its CSS the same way.
  base.html already bakes the brand tokens (--color-*) and loads modern.css, so here we only
  add the system-pages stylesheet and hide the site chrome (header/footer) for a clean card.
#}
{% extends "../layouts/base.html" %}

{# System-pages stylesheet — loaded the supported way. Do NOT {% include %} a .css file
   (that fails validation) and do NOT rely on a standalone layout (get_asset_url returns
   empty there). #}
{{ require_css(get_asset_url("../../css/components/system-pages.css")) }}

{# Re-expose title/description so child templates' {% block title %} reaches base.html's
   <title> (a grandchild block doesn't propagate to a grandparent unless the intermediate
   layout re-declares it). #}
{% block title %}{{ pageTitle|default("System Page") }}{% endblock %}
{% block description %}{% endblock %}

{# No site navigation or footer on system pages — just the centered card. #}
{% block header %}{% endblock header %}
{% block footer %}{% endblock footer %}

{% block body %}
  <div class="system-page {% block page_class %}{% endblock %}">
    <div class="system-container {% block container_class %}{% endblock %}">

      {# Brand / Logo #}
      {% block brand %}
        <div class="system-brand">
          {% if brand_settings.primaryLogo.src %}
            <img src="{{ brand_settings.primaryLogo.src }}"
                 alt="{{ brand_settings.primaryLogo.alt or site_settings.company_name }}"
                 class="system-logo">
          {% elif site_settings.company_name %}
            <span class="system-brand-name">{{ site_settings.company_name }}</span>
          {% endif %}
        </div>
      {% endblock %}

      {# Icon Block #}
      {% block icon %}
        <div class="system-icon">
          {% block icon_content %}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M12 2L2 7l10 5 10-5-10-5z"/>
              <path d="M2 17l10 5 10-5"/>
              <path d="M2 12l10 5 10-5"/>
            </svg>
          {% endblock %}
        </div>
      {% endblock %}

      {# Status/Code Block (for error pages) #}
      {% block status_code %}{% endblock %}

      {# Title #}
      <h1 class="system-title">{% block page_title %}System Page{% endblock %}</h1>

      {# Status Message (if applicable) #}
      {% block status_message %}{% endblock %}

      {# Main Message — div wrapper so templates can safely include block-level elements #}
      <div class="system-message">
        {% block page_message %}{% endblock %}
      </div>

      {# Main Content Area #}
      {% block main_content %}{% endblock %}

      {# Actions/Buttons #}
      {% block actions %}
        <div class="system-actions">
          {% block action_buttons %}
            <a href="/" class="btn btn-primary">Go to Homepage</a>
          {% endblock %}
        </div>
      {% endblock %}

      {# Additional Content #}
      {% block additional_content %}{% endblock %}

      {# Footer/Contact Info #}
      {% block footer_info %}{% endblock %}
    </div>
  </div>

  {# Page-specific scripts #}
  {% block scripts %}{% endblock %}
{% endblock body %}
