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

{% block title %}
<title>
    {% if is_sponsored or is_sponsorship_pending %}
        Zulip
        {% if is_remotely_hosted %}
        {% else %}
        Cloud
        {% endif %}
        billing for {{ org_name }}
    {% else %}
        Request Zulip
        {% if is_remotely_hosted %}
        {% else %}
        Cloud
        {% endif %} sponsorship
    {% endif %}
</title>
{% endblock %}

{% block portico_content %}

{% if is_sponsored or is_sponsorship_pending %}

<div class="register-account flex full-page sponsorship-status-page">
    <div class="center-block new-style">
        <div class="alert alert-success sponsorship-page-success" id="sponsorship-status-success-message-top">
            {% if is_sponsored %}
            Zulip is sponsoring a free <a href="{{ billing_base_url }}/plans/">{{ sponsored_plan_name }}</a> plan for this organization. 🎉
            {% else %}
            This organization has requested sponsorship for a <a href="{{ billing_base_url }}/plans/">{{ sponsored_plan_name }}</a> plan. <a href="mailto:support@zulip.com">Contact Zulip support</a> with any questions or updates.
            {% endif %}
        </div>
        <div class="pitch">
            <h1>
                Zulip
                {% if is_remotely_hosted %}
                {% else %}
                Cloud
                {% endif %}
                billing for {{ org_name }}
            </h1>
        </div>
        <div class="white-box">
            <div id="sponsorship-status-page-details">
                <div class="input-box sponsorship-form-field no-validation">
                    <label for="sponsored-org-current-plan" class="inline-block label-title">Your plan</label>
                    <div id="sponsored-org-current-plan" class="not-editable-realm-field">
                        {% if free_trial %}
                        {{ plan_name }} <i>(free trial)</i>
                        {% else %}
                        {{ plan_name }}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% if is_sponsored %}
        <hr />
        <div class="support-link">
            <p>
                To make changes to your plan or view your billing history <a href="mailto:support@zulip.com">contact Zulip support</a>.
            </p>
        </div>
        {% endif %}
    </div>
</div>

{% else %}

<div class="register-account flex full-page sponsorship-page">
    <div class="center-block new-style">
        <div class="pitch">
            <h1>
                Request Zulip
                {% if is_remotely_hosted %}
                {% else %}
                Cloud
                {% endif %} sponsorship
            </h1>
        </div>
        <div class="white-box">
            <div id="sponsorship-error" class="alert alert-danger"></div>
            <div id="sponsorship-input-section">
                <form id="sponsorship-form" method="post" data-billing-base-url="{{ billing_base_url }}">
                    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" />
                    <div class="input-box sponsorship-form-field no-validation">
                        <label for="org-name" class="inline-block label-title">Organization</label>
                        <div id="org-name" class="not-editable-realm-field">{{ org_name }}</div>
                    </div>
                    <div class="input-box sponsorship-form-field">
                        <div class="inline-block relative">
                            <select name="organization_type" id="organization-type" class="sponsorship-form-select">
                                {% for org_type in sorted_org_types %}
                                    {% if not org_type[1].hidden %}
                                    <option data-string-value="{{ org_type[0] }}"
                                      {% if org_type[1].id == realm_org_type %}selected{% endif %}
                                      value="{{ org_type[1].id }}">
                                        {{ _(org_type[1].name) }}
                                    </option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <label for="organization_type" class="inline-block label-title">Organization type</label>
                    </div>
                    <p id="sponsorship-discount-details"></p>
                    <div class="input-box sponsorship-form-field no-validation">
                        <label for="org-website" class="inline-block
                          label-title">Organization website (if any)</label>
                        <input id="org-website" name="website" type="text"/>
                        <div id="sponsorship-org-website-error" class="alert alert-danger sponsorship-field-error"></div>
                    </div>
                    <div class="input-box sponsorship-form-field">
                        <label for="description" class="inline-block
                          label-title">Description of your organization</label>
                        <textarea id="description" name="description" cols="100" rows="5"></textarea>
                        <div id="sponsorship-description-error" class="alert alert-danger sponsorship-field-error"></div>
                    </div>
                    <div class="input-box sponsorship-form-field">
                        <label for="expected-total-users" class="inline-block label-title">Expected number of users (approximate range)</label>
                        <input id="expected-total-users" name="expected_total_users" type="text" />
                        <div id="sponsorship-expected-total-users-error" class="alert alert-danger sponsorship-field-error"></div>
                    </div>
                    <div class="input-box sponsorship-form-field no-validation">
                        <label for="paid-users-count" class="inline-block label-title">How many paid staff does your organization have?</label>
                        <input id="paid-users-count" name="paid_users_count" type="text"/>
                        <div id="sponsorship-paid-users-count-error" class="alert alert-danger sponsorship-field-error"></div>
                    </div>
                    <div class="input-box sponsorship-form-field">
                        <label for="paid-users-description" class="inline-block
                          label-title">Description of paid staff (if any)</label>
                        <textarea id="paid-users-description" name="paid_users_description" cols="100" rows="2"></textarea>
                        <div id="sponsorship-paid-users-description-error" class="alert alert-danger sponsorship-field-error"></div>
                    </div>
                    <!-- 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" {% if is_demo_organization %}data-tippy-content="Convert demo organization before upgrading."{% endif %}>
                        <button type="submit" id="sponsorship-button" class="stripe-button-el invoice-button" {% if is_demo_organization %}disabled{% endif %}>
                            <span class="sponsorship-button-text">Submit</span>
                            <object class="loader sponsorship-button-loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}