{% extends "zerver/portico.html" %}

{% block title %}
<title>{{ _("Log in to your organization") }} | Zulip</title>
{% endblock %}

{% block portico_content %}

<div class="app goto-account-page flex full-page">
    <div class="inline-block new-style">
        <div class="lead">
            <h1 class="get-started">{{ _("Log in to your organization") }}</h1>
        </div>

        <div class="app-main goto-account-page-container white-box">
            <div class="realm-redirect-form">
                <form class="form-inline" name="realm_redirect_form"
                  action="/accounts/go/{% if request.GET %}?{{ request.GET.urlencode() }}{% endif %}" method="post">
                    {{ csrf_input }}
                    <div class="input-box horizontal">
                        <div class="inline-block relative">
                            <p id="realm_redirect_description">{{ _("Organization URL") }}</p>
                            <input
                              type="text" value="{% if form.subdomain.value() %}{{ form.subdomain.value() }}{% endif %}"
                              placeholder="{{ _('your-organization') }}" autofocus id="realm_redirect_subdomain" name="subdomain"
                              autocomplete="off"/>
                            <span id="realm_redirect_external_host">.{{external_host}}</span>
                        </div>
                        <div id="errors">
                            {% if form.subdomain.errors %}
                                {% for error in form.subdomain.errors %}
                                <div class="alert alert-error">{{ error }}</div>
                                {% endfor %}
                            {% endif %}
                        </div>
                        <p class="bottom-text left-text">
                            {{ _("Don't know your organization URL?") }}
                            <a target="_blank" rel="noopener noreferrer" href="/accounts/find/">{{ _("Find your organization.") }}</a>
                        </p>
                        <button id="enter-realm-button" type="submit">{{ _('Next') }}</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="bottom-text">
            {% trans org_creation_link="/new/" %}
            <a target="_blank" rel="noopener noreferrer" href="{{ org_creation_link }}">Create a new organization</a> if you don't have one yet.
            {% endtrans %}
        </div>
        <div class="bottom-text self-hosting-login-help-text">
            {{ _("Self-hosting Zulip?") }}
            {% trans self_hosted_login_help="https://zulip.com/help/self-hosted-billing#log-in-to-billing-management" %}
            You can <a target="_blank" rel="noopener noreferrer" href="{{ self_hosted_login_help }}">log in to manage plans and billing.</a>
            {% endtrans %}
        </div>
    </div>

</div>
{% endblock %}