{% extends "zerver/portico_signup.html" %}
{% set entrypoint = "register" %}

{% block title %}
<title>{{ _("Registration") }} | Zulip</title>
{% endblock %}

{#
Gather other user information, after having confirmed
their email address.

Form is validated both client-side using jquery-validation (see signup.js) and server-side.
#}

{% block portico_content %}
<div class="register-account flex full-page">
    <div class="center-block new-style" id="create-account">

        <div class="pitch">
            {% if creating_new_realm %}
            <h1>{{ _('Create your organization') }}</h1>
            {% else %}
            <h1>{{ _('Create your account') }}</h1>
            {% endif %}

            {% trans %}
            <p>Enter your account details to complete registration.</p>
            {% endtrans %}
        </div>

        <form method="post" class="white-box" id="registration" action="{{ url('accounts_register') }}">
            {{ csrf_input }}

            <fieldset class="org-registration">
                {% if creating_new_realm %}
                <legend>{{ _('Your organization') }}
                    {% if not form.realm_subdomain.errors %}
                    <span class="edit-realm-details" role="button" tabindex="0"><i class="fa fa-pencil"></i></span>
                    {% endif %}
                </legend>
                {% with %}
                    {% set user_registration_form = "true" %}
                    {% include 'zerver/create_realm/realm_creation_name_form_field.html' %}
                    {% include 'zerver/create_realm/realm_creation_base_form_fields.html' %}
                    {% include 'zerver/create_realm/realm_creation_subdomain_form_field.html' %}
                    {% if is_realm_import_enabled %}
                    {% include 'zerver/create_realm/realm_creation_import_form_field.html' %}
                    {% endif %}
                {% endwith %}
                {% if not form.realm_subdomain.errors %}
                <div class="not-editable-realm-details">
                    <div class="input-box">
                        <label for="id_realm_name" class="inline-block label-title">{{ _('Organization name') }}</label>
                        <div id="id_realm_name" class="not-editable-realm-field">{{ form.realm_name.value() }}</div>
                    </div>
                    <div class="input-box">
                        <label for="id_realm_type" class="inline-block label-title">{{ _('Organization type') }}</label>
                        <div id="id_realm_type" class="not-editable-realm-field">{{ selected_realm_type_name }}</div>
                    </div>
                    <div class="input-box">
                        <label for="id_realm_default_language" class="inline-block label-title">{{ _('Organization language') }}</label>
                        <div id="id_realm_default_language" class="not-editable-realm-field">{{ selected_realm_default_language_name }}</div>
                    </div>
                    <div class="input-box">
                        <label for="id_realm_subdomain" class="inline-block label-title">{{ _('Organization URL') }}</label>
                        <div id="id_realm_subdomain" class="not-editable-realm-field">{% if form.realm_subdomain.value() %}{{ form.realm_subdomain.value() }}.{% endif %}{{external_host}}</div>
                    </div>
                </div>
                {% endif %}
                {% endif %}
            </fieldset>

            <fieldset class="user-registration">
                {% if creating_new_realm %}
                <legend>{{ _('Your account') }}</legend>
                {% endif %}
                {% if realm_name and not creating_new_realm %}
                <img class="avatar inline-block" src="{{ realm_icon }}" alt="" />
                <div class="info-box inline-block">
                    <div class="organization-name organization-name-delayed-tooltip">{{ realm_name }}</div>
                    <div class="organization-path">{{ realm_url }}</div>
                </div>
                {% endif %}

                <div class="input-box">
                    <input type='hidden' name='key' value='{{ key }}' />
                    <input type='hidden' name='timezone' id='timezone'/>
                    <label for="id_email" class="inline-block label-title">{{ _('Email') }}</label>
                    <div id="id_email">{{ email }}</div>
                    {% if not creating_new_realm %}
                    {% include 'zerver/create_user/new_user_email_address_visibility.html' %}
                    {% endif %}
                </div>

                {% if accounts %}
                <div class="input-box">
                    <div class="inline-block relative">
                        <select class="select" name="source_realm_id" id="source_realm_select">
                            <option value=""
                              {% if "source_realm_id" in form.data and form.data["source_realm_id"] == "" %}selected {% endif %}>
                                {{ _('Don&rsquo;t import settings') }}
                            </option>
                            {% for account in accounts %}
                            <option value="{{ account.realm_id }}" data-full-name="{{account.full_name}}" data-avatar="{{account.avatar}}"
                              {% if ("source_realm_id" in form.data and account.realm_id == form.data["source_realm_id"]|int)
                              or ("source_realm_id" not in form.data and loop.index0 == 0) %} selected {% endif %}>
                                {{ account.realm_name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <label for="source_realm_id" class="inline-block">{{ _('Import settings from existing Zulip account') }}
                        <a href="{{ root_domain_url }}/help/import-your-settings"><i class="fa fa-question-circle"></i></a>
                    </label>
                </div>
                {% endif %}

                <div class="input-box" id="full_name_input_section">
                    {% if lock_name %}
                        <p class="fakecontrol">{{ full_name }}</p>
                    {% else %}
                        <input id="id_full_name" class="required" type="text" name="full_name"
                          value="{% if full_name %}{{ full_name }}{% elif form.full_name.value() %}{{ form.full_name.value() }}{% endif %}"
                          maxlength="{{ MAX_NAME_LENGTH }}" placeholder="{% trans %}Your full name{% endtrans %}" required />
                        <label for="id_full_name" class="inline-block label-title">{{ _('Name') }}</label>
                        {% if form.full_name.errors %}
                            {% for error in form.full_name.errors %}
                            <p class="help-inline text-error">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                    {% endif %}
                    <p class="registration-form-hint">{{ _('This is how your account is displayed in Zulip.') }}</p>
                </div>

                <div class="input-box" id="profile_info_section" style="display:none;">
                    <img id="profile_avatar" />
                    <div id="profile_full_name"></div>
                </div>

                {% if require_ldap_password %}
                <div class="input-box password-div">
                    <input id="ldap-password" class="required" type="password" name="password" autocomplete="off" required />
                    <label for="ldap-password" class="inline-block">{{ _('Password') }}</label>
                    <i class="zulip-icon zulip-icon-hide password_visibility_toggle" role="button" tabindex="0"></i>
                    <span class="help-inline">
                        {{ _('Enter your LDAP/Active Directory password.') }}
                    </span>
                </div>
                {% elif password_required %}
                <div class="input-box password-div">
                    <input id="id_password" class="required" type="password" name="password" autocomplete="new-password"
                      value="{% if form.password.value() %}{{ form.password.value() }}{% endif %}"
                      data-min-length="{{password_min_length}}"
                      data-max-length="{{ password_max_length }}"
                      data-min-guesses="{{password_min_guesses}}" required />
                    <label for="id_password" class="inline-block">{{ _('Password') }}</label>
                    <i class="zulip-icon zulip-icon-hide password_visibility_toggle" role="button" tabindex="0"></i>
                    {% if full_name %}
                    <span class="help-inline">
                        {{ _('This is used for mobile applications and other tools that require a password.') }}
                    </span>
                    {% endif %}
                    {% if form.password.errors %}
                        {% for error in form.password.errors %}
                        <p class="help-inline text-error">{{ error }}</p>
                        {% endfor %}
                    {% endif %}
                    <div class="progress" id="pw_strength" title="{{ _('Password strength') }}">
                        <div class="bar bar-danger" style="width: 10%;"></div>
                    </div>
                </div>
                {% endif %}
            </fieldset>
            {% if default_stream_groups %}
            <hr />
            <div class="default-stream-groups">
                <p>{{ _('What are you interested in?') }}</p>
                {% for default_stream_group in default_stream_groups %}
                <div class="input-group">
                    <label for="id_default_stream_group__{{ default_stream_group.id }}"
                      class="inline-block checkbox">
                        <input class="inline-block" type="checkbox"
                          name="default_stream_group"
                          id="id_default_stream_group__{{ default_stream_group.id }}" value="{{ default_stream_group.name }}"
                          {% if "default_stream_group" in form.data and default_stream_group.id in form.data.getlist('default_stream_group') %} checked {% endif %} />
                        <span class="rendered-checkbox"></span>
                        {% set comma = joiner(", ") %}
                        <span class="default_stream_group_name inline-block"
                          title="{{ default_stream_group.description }}">
                            {{ default_stream_group.name }}
                        </span>
                        (
                        {%- for stream in default_stream_group.streams.all() -%}
                            {{- comma() -}} <span class="stream_name inline-block">#{{ stream.name }}</span>
                        {%- endfor -%}
                        )
                    </label>
                </div>
                {% endfor %}
            </div>
            <hr />
            {% endif %}

            {% if creating_new_realm %}
            {% include 'zerver/create_realm/found_zulip_form_field.html' %}
            {% endif %}

            <div class="input-group">
                {% if terms_of_service %}
                {% include 'zerver/create_user/terms_of_service_form_field.html' %}
                {% endif %}
                {% if corporate_enabled %}
                <div class="input-group marketing-emails">
                    <label for="id_enable_marketing_emails" class="inline-block checkbox marketing_emails_checkbox">
                        <input id="id_enable_marketing_emails" type="checkbox" name="enable_marketing_emails"
                          checked="checked" />
                        <span class="rendered-checkbox"></span>
                        {% trans %}Subscribe me to Zulip's low-traffic newsletter (a few emails a year).{% endtrans %}
                    </label>
                </div>
                {% endif %}
                <div class="register-button-box">
                    <button class="register-button" type="submit">
                        <span>{{ _('Sign up') }}</span>
                        <object class="loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
                    </button>
                    <input type="hidden" name="next" value="{{ next }}" />
                </div>
            </div>
        </form>

    </div>
</div>

{% if not creating_new_realm %}
{% include 'zerver/create_user/change_email_address_visibility_modal.html' %}
{% endif %}

{% endblock %}