{% extends "profiles/base_edit.html" %}

{% load blocktrans trans from i18n %}
{% load crispy from crispy_forms_filters %}

{% load alter_field from ext_theme_tags %}

{% block profile_admin_gold_edit %}
  active
{% endblock profile_admin_gold_edit %}

{% block title %}
  {% trans "Gold membership" %}
{% endblock title %}

{% block edit_content_header %}
  {% trans "Gold membership" %}
{% endblock edit_content_header %}

{% block edit_content_subheader %}
  <div class="ui breadcrumb">
    <div class="active section">
      {% if golduser %}
        {% trans "Manage your subscription" %}
      {% else %}
        {% trans "Sign up" %}
      {% endif %}
    </div>
  </div>
{% endblock edit_content_subheader %}

{% block edit_content %}
  <div class="ui basic segment">

    <p>
      {% blocktrans trimmed %}
        Supporting Read the Docs lets us work more on features that people love.
        Your money will go directly to maintenance and development of the
        product.
      {% endblocktrans %}
    </p>

    <p>
      {% blocktrans trimmed %}
        Gold members may also completely remove advertising for all visitors to their projects.
      {% endblocktrans %}
    </p>

    <ul class="ui bulleted list">
      <li class="item">
        {% trans "For small businesses or personal projects, we ask for $5 per month to remove ads from a project." %}
      </li>
      <li class="item">
        {% trans "For corporate supported open source projects, we ask for a $50 membership in order to cover our support and operations costs." %}
      </li>
    </ul>

    <p>
      {% blocktrans trimmed %}
        If you are a company using Read the Docs,
        please consider <a href="https://readthedocs.com/">Read the Docs for Business</a>.
        This will help us cover our costs,
        and provide you with a better experience on the site.
      {% endblocktrans %}
    </p>

    <p>
      {% blocktrans trimmed %}
        For any questions about our Gold membership program,
        please <a href="mailto:support@readthedocs.org?subject=Gold%20membership%20questions">email us</a>.
      {% endblocktrans %}
    </p>

    {% if golduser %}
      {% block gold_membership_active %}

        <h3>
          {% blocktrans trimmed %}
            Your gold membership
          {% endblocktrans %}
        </h3>

        <p>
          {% blocktrans trimmed %}
            Thanks for supporting Read the Docs! It really means a lot to us.
          {% endblocktrans %}
        </p>

        <div class="ui segment">
          <i class="fa-badge-check fas primary icon"></i>
          <label>{% trans "Level" %}:</label>
          <span>{{ golduser.get_level_display }}</span>
        </div>

        <form action="{% url "gold_subscription_portal" %}" method="post">
          {% csrf_token %}
          <input class="ui primary button"
                 type="submit"
                 value="{% trans "Manage subscription" %}" />
        </form>

        <h3>{% trans "Gold projects" %}</h3>
        <p>{% trans "Choose projects you would like to make ad-free." %}</p>

        <a class="ui primary button" href="{% url "gold_projects" %}">
          {% trans "Select projects" %}
        </a>

      {% endblock gold_membership_active %}
    {% else %}
      {% block gold_membership_inactive %}

        <div data-bind="using: new StripeCheckoutView({stripeKey: '{{ stripe_publishable }}', checkoutSessionUrl: '{% url "gold_checkout_create" %}', csrfToken: '{{ csrf_token }}'})">
          <h3>
            {% blocktrans trimmed %}
              Become a Gold member
            {% endblocktrans %}
          </h3>

          {# Note: not an actual form as the JS handles the POST and Stripe Checkout redirect #}
          <div class="ui loading form" data-bind="css: { loading: stripeLoading }">
            {% alter_field form.level data_bind="valueInit: priceId" %}
            {{ form | crispy }}
            <input class="ui primary button"
                   type="submit"
                   data-bind="click: createCheckoutSession"
                   value="{% trans "Sign up" %}" />
          </div>
        </div>

      {% endblock gold_membership_inactive %}
    {% endif %}
  </div>
{% endblock edit_content %}