<!--
  templateType: membership_register_page
  isAvailableForNewContent: true
  label: Member Registration
  screenshotPath: ../../images/template-previews/membership-register.png
-->
{% extends "../layouts/base-system.html" %}

{% block title %}Create Account{% endblock %}
{% block description %}Sign up for a new account{% endblock %}

{% block page_class %}page-auth{% 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">
      <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
      <circle cx="8.5" cy="7" r="4"/>
      <line x1="20" y1="8" x2="20" y2="14"/>
      <line x1="23" y1="11" x2="17" y2="11"/>
    </svg>
  </div>
{% endblock %}

{% block page_title %}Create Your Account{% endblock %}

{% block page_message %}
  Welcome! Set up your account to access exclusive content and features.
{% endblock %}

{% block main_content %}
  <div class="system-form">
    {% member_register "membership_register"
      email_label="Email Address",
      password_label="Password",
      password_confirm_label="Confirm Password",
      submit_button_text="Create Account"
    %}
    
    <div class="form-footer">
      Already have an account? 
      <a href="/membership/login">Sign in</a>
    </div>
  </div>
  
  <div class="system-section" style="font-size: 0.875rem; color: var(--color-text-secondary, #718096);">
    <p>By creating an account, you agree to our <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy Policy</a>.</p>
  </div>
{% endblock %}

{% block actions %}{% endblock %}

{% block footer_info %}
  {% if site_settings.membershipWebsiteAdmin %}
    <div class="system-contact">
      <p>Having trouble registering?</p>
      <p><a href="mailto:{{ site_settings.membershipWebsiteAdmin }}">Contact the administrator</a></p>
    </div>
  {% endif %}
{% endblock %}