{% extends "zerver/portico.html" %}
{% set entrypoint = "upgrade" %}

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

{% block portico_content %}
<div id="upgrade-page" class="register-account flex full-page">
    <div class="center-block new-style">
        <div class="pitch">
            <h1>Upgrade {{ realm.name }} to {{ plan }}</h1>
        </div>
        <div class="white-box">
            <div id="upgrade-page-details">
                {% if free_trial_days %}
                <div id="free-trial-alert-message" class="alert alert-info">
                    Upgrade now to start your {{ free_trial_days }} day free trial
                    of Zulip Cloud Standard!
                </div>
                {% endif %}

                {% if is_demo_organization %}
                <div class="demo-organization-warning">
                    Demo organizations cannot be directly upgraded to a paid plan. Please start by
                    <a href="/help/demo-organizations#convert-a-demo-organization-to-a-permanent-organization">
                    converting your demo organization
                    </a>
                    to a permanent organization.
                </div>
                {% endif %}

                {% if error_message %}
                <div class="alert alert-danger" id="upgrade-error-message-box">
                    {{ error_message }}
                </div>
                {% endif %}

                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" />
                <div>
                    <div id="autopay">
                        <div id="autopay-input-section">
                            <form id="autopay-form">
                                <input type="hidden" name="seat_count" value="{{ seat_count }}" />
                                <input type="hidden" name="signed_seat_count" value="{{ signed_seat_count }}" />
                                <input type="hidden" name="salt" value="{{ salt }}" />
                                <input type="hidden" name="billing_modality" value="charge_automatically" />
                                {% if onboarding %}
                                <input type="hidden" name="onboarding" value="true" />
                                {% endif %}
                                {% if onboarding and free_trial_days %}
                                <p><b>Not ready to start your trial?</b> <a href="/">Continue with the Zulip Cloud Free plan</a>.</p>
                                <hr />
                                <h2>Zulip Cloud Standard free trial</h2>
                                {% endif %}
                                <div class="input-box upgrade-page-field no-validation">
                                    <div id="autopay-error" class="alert alert-danger"></div>
                                    {% if free_trial_days %}
                                    <p>
                                        You won't be charged during the free trial. You can also downgrade to
                                        Zulip Cloud Free, our forever free plan, at any time.
                                    </p>
                                    {% endif %}
                                    <select name="payment-schedule" id="payment-schedule-select">
                                        <option value="monthly" id="autopay_monthly_price"></option>
                                        <option value="annually" id="autopay_annual_price_per_month"></option>
                                    </select>
                                    <label for="payment-schedule-select">Payment schedule</label>
                                </div>

                                <div class="input-box upgrade-page-field no-validation">
                                    <label for="due_today" class="inline-block label-title">Due today</label>
                                    <div id="due_today" class="not-editable-realm-field">
                                        $6.67 x 10 users x 1 month

                                        <h1>$66.70</h1>
                                    </div>
                                </div>

                                {% if not manual_license_management %}
                                <div id="license-automatic-section" class="input-box upgrade-page-field license-management-section">
                                    <p class="not-editable-realm-field">
                                        {% if free_trial_days %}
                                        After the Free Trial, you&rsquo;ll be charged
                                        <b>$<span id="charged_amount"></span></b> for <b>{{ seat_count }}</b>
                                        users (or more if you later add more users).<br />

                                        We'll automatically charge you for additional licenses as users
                                        are added, and remove licenses not in use at the end of each billing
                                        period.
                                        {% else %}
                                        Your subscription will renew automatically. Your bill will vary based on the number
                                        of active users in your organization. You can also
                                        <a href="/upgrade/?manual_license_management=true">purchase a fixed number of licenses</a> instead. See
                                        <a target="_blank" href="https://zulip.com/help/zulip-cloud-billing">here</a> for details.
                                        {% endif %}
                                    </p>
                                    <input type="hidden" name="licenses" id="automatic_license_count" value="{{ seat_count }}" />
                                </div>
                                {% else %}
                                <div id="license-manual-section" class="input-box upgrade-page-field">
                                    <p class="not-editable-realm-field">
                                        {% if free_trial_days %}
                                        Enter the number of users you would like to pay for after the Free Trial.<br />
                                        You'll need to manually add licenses to add or invite
                                        additional users.
                                        {% else %}
                                        Your subscription will renew automatically. You will be able to manage the number of licenses on
                                        your organization's billing page. You can also
                                        <a href="/upgrade/">choose automatic license management</a> instead. See
                                        <a href="https://zulip.com/help/zulip-cloud-billing">here</a> for details.
                                        {% endif %}
                                    </p>
                                    <h4>Number of licenses {% if not exempt_from_license_number_check %}(minimum {{ seat_count }}){% endif %}</h4>
                                    <input type="number" name="licenses" {% if not exempt_from_license_number_check %}min="{{ seat_count }}"{% endif %} autocomplete="off" id="manual_license_count" required/><br />
                                </div>
                                {% endif %}
                                <!-- Disabled buttons do not fire any events, so we need a container div that isn't disabled for tippyjs to work -->
                                <div class="upgrade-button-container input-box upgrade-page-field" {% if is_demo_organization %}data-tippy-content="{% trans %}Convert demo organization before upgrading.{% endtrans %}"{% endif %}>
                                    <button id="org-upgrade-button{% if is_demo_organization %} permanent-disabled{% endif %}">
                                        <span id="org-upgrade-button-span">
                                            Purchase Zulip Cloud Standard
                                        </span>
                                        <object class="loader upgrade-button-loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="input-box upgrade-page-field">
                    <div class="support-link not-editable-realm-field">
                        To pay by invoice or for any other questions, contact <a href="mailto:sales@zulip.com">sales@zulip.com</a>.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}