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

{% block customhead %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ bundle('landing-page') }}
{{ bundle('billing') }}
<script src="https://checkout.stripe.com/checkout.js"></script>
{% endblock %}

{% block content %}

<div class="app portico-page">

    {% include 'zerver/billing_nav.html' %}

    {{ bundle('translations') }}
    <div class="portico-landing billing-upgrade-page">
        <div class="hero small-hero"></div>

        <div class="page-content">
            <div class="main">
                <div class="alert alert-danger" id="error-message-box"></div>
                <h1>{{ _("Billing") }}</h1>
                {% if admin_access %}
                <ul class="nav nav-tabs" id="billing-tabs">
                    <li class="active"><a data-toggle="tab" href="#overview">Overview</a></li>
                    <li><a data-toggle="tab" href="#payment-method">Payment Method</a></li>
                </ul>

                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                <div class="tab-content">
                    <div class="tab-pane active" id="overview">
                        <p>Your current plan is <strong>{{ plan_name }}</strong>.</p>
                        <p>You are using <strong>{{ licenses_used }} of {{ licenses }} licenses</strong>.</p>
                        <p>
                            {% if renewal_amount %}
                            Your plan will renew on <strong>{{ renewal_date }}</strong> for
                            <strong>${{ renewal_amount }}</strong>.
                            {% else %}
                            Your plan ends on <strong>{{ renewal_date }}</strong>, and does not renew.
                            {% endif %}
                        </p>
                    </div>
                    <div class="tab-pane" id="payment-method" data-email="{{stripe_email}}" data-key="{{publishable_key}}">
                        <div id="cardchange-error" class="alert alert-danger"></div>
                        <div id="cardchange-input-section">
                            <form id="cardchange-form">
                                <p>Current payment method: <strong>{{ payment_method }}</strong></p>
                                {% if charge_automatically %}
                                <button id="update-card-button" class="stripe-button-el">
                                    <span id="update-card-button-span">Update card</span>
                                </button>
                                {% endif %}
                            </form>
                        </div>
                        <div id="cardchange-loading">
                            <div class="zulip-loading-logo">
                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" version="1.1">
                                    <g transform="translate(-297.14285,-466.64792)">
                                        <circle cx="317.14285" cy="486.64792" r="19.030317" style="stroke-width:1.93936479;"/>
                                        <path d="m309.24286 477.14791 14.2 0 1.6 3.9-11.2 11.9 9.6 0 1.6 3.2-14.2 0-1.6-3.9 11.2-11.9-9.6 0z"/>
                                    </g>
                                </svg>
                            </div>
                            <div id="cardchange_loading_indicator"></div>
                        </div>
                        <div id="cardchange-success" class="alert alert-success">
                            Card updated. The page will now reload.
                        </div>
                    </div>
                    <div class="tab-pane" id="loading">
                    </div>
                </div>

                <div class="support-link">
                    <p>
                        Contact <a href="mailto:support@zulipchat.com">support@zulipchat.com</a>
                        for billing history or to make changes to your subscription.
                    </p>
                </div>

                {% else %}
                <p>
                    You must be an organization administrator or a billing administrator to view this page.
                </p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}