{#
Copyright 2025, 2026 Element Creations Ltd.
Copyright 2024, 2025 New Vector Ltd.
Copyright 2021-2024 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
-#}

{% extends "base.html" %}

{% block head %}
  {{ include_asset('src/entrypoints/register.tsx') | indent(4) | safe }}
  {# Pre-load the locale data for the current language #}
  {{ include_asset('locales/' ~ lang ~ '.json') | indent(4) | safe }}
{% endblock head %}

{% block content %}
  <header class="page-heading">
    <div class="icon">
      {{ icon.user_profile_solid() }}
    </div>

    <div class="header">
      <h1 class="title">{{ _("mas.register.create_account.heading") }}</h1>
    </div>
  </header>

  <div id="register-form"
       data-csrf-token="{{ csrf_token }}"
       {%- if captcha_config %} data-captcha-config='{{ captcha_config | tojson }}'{% endif %}
       {%- if token %} data-token="{{ token }}"{% endif %}
       data-branding='{{ branding | tojson }}'
       data-features='{{ features | tojson }}'
       data-form='{{ form | tojson }}'
       data-providers='{{ providers | tojson }}'
       data-login-link="{{ login_link }}"
       data-graphql-endpoint="{{ graphql_endpoint }}">
    <p class="sr-only">{{ _("mas.loading") }}</p>

    {# Rough outline of the form, to keep the page from jumping once it mounts #}
    <div class="register-skeleton" aria-hidden="true">
      <div class="field"><span class="label"></span><span class="control"></span></div>
      <div class="field"><span class="label"></span><span class="control"></span></div>
      <span class="submit"></span>
    </div>
  </div>

  <div id="register-form-error" class="critical-notice" hidden>
    {{ _("mas.loading_failed") }}
  </div>

  <noscript>
    {# The skeleton would otherwise sit above this message forever #}
    <style>#register-form { display: none; }</style>

    <p class="critical-notice">{{ _("mas.register.javascript_required") }}</p>
  </noscript>
{% endblock content %}