{% extends "organizations/settings/base.html" %}

{% load alter_field from ext_theme_tags %}
{% load trans blocktrans from i18n %}
{% load as_crispy_field from crispy_forms_tags %}

{% block title %}
  {{ organization.name }} - {% trans "Authorization" %}
{% endblock title %}

{% block organization_sso_active %}
  active
{% endblock organization_sso_active %}
{% block organization_edit_content_header %}
  {% trans "Authorization" %}
{% endblock organization_edit_content_header %}

{% block organization_edit_sidebar_help_topics %}
  {% include "includes/elements/link.html" with url="https://docs.readthedocs.io/en/stable/commercial/single-sign-on.html" text=_("Organization single sign-on") is_external=True class="item" %}
{% endblock organization_edit_sidebar_help_topics %}

{% block organization_edit_content %}
  <p>
    {% blocktrans trimmed %}
      Change how users authenticate in your organization and reuse permissions from another service to control access to your projects and documentation.
    {% endblocktrans %}
  </p>

  {% if organization.ssointegration %}
    <div class="ui message">
      <div class="header">{% trans "Invite users into your organization" %}</div>
      <p>
        {% trans "You can invite people to join your organization by sending them this link:" %}
      </p>

      <div class="ui fluid action input">
        <input type="text"
               readonly=""
               id="organization-link"
               value="https://{{ PRODUCTION_DOMAIN }}{% url 'account_signup' %}?organization={{ organization.slug }}" />
        <button class="ui right labeled icon button"
                data-clipboard-target="#organization-link">
          <i class="fas fa-copy icon"></i>
          {% trans "Copy" %}
        </button>
      </div>
    </div>
  {% endif %}

  <div data-bind="using: new OrganizationSettingsAuthorizationView()">
    <form class="ui form"
          method="post"
          action="."
          data-bind="css: { warning: show_warning }">
      {% csrf_token %}

      <div class="ui top attached segment">
        <div class="ui relaxed list">

          <div class="item">
            <i class="fad fa-user-group medium middle aligned icon"></i>
            <div class="content">
              <div class="header">
                {{ form.PROVIDER_DEFAULT }}
                <span class="ui horizontal label">{% trans "Default" %}</span>

              </div>
              <div class="description">
                {% blocktrans trimmed %}
                  Use built-in organization teams to manage access to your projects and documentation.
                {% endblocktrans %}
              </div>
            </div>
          </div>

          <div class="item">
            <i class="fab fa-github medium middle aligned icon"></i>
            <div class="content">
              <div class="header">{{ form.PROVIDER_ALLAUTH }}</div>
              <div class="description">
                {% blocktrans trimmed %}
                  Control all access to your projects by reusing permissions from your repository's version control provider.
                  This replaces Read the Docs managed teams.
                {% endblocktrans %}
              </div>
            </div>
          </div>

          <div class="item">
            <i class="fab fa-google middle aligned icon"></i>
            <div class="content">
              <div class="header">
                {{ form.PROVIDER_EMAIL }}
                <a class="ui secondary horizontal label"
                   href="{% url 'subscription_detail' organization.slug %}">Pro plan</a>
              </div>
              <div class="description">
                {% blocktrans trimmed %}
                  Users with a verified Google Workspace email account matching your domain will auto-join your organization.
                  All users in your organization are required to have a connected Google account.
                  Project permissions and authorization are managed using Read the Docs teams.
                {% endblocktrans %}
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="ui basic fieldset segment">
        {% alter_field form.provider data_bind="valueInit: provider, value: provider" %}
        {{ form.provider | as_crispy_field }}

        <div class="ko hidden" data-bind="css: { hidden: !use_domain() }">
          {{ form.domain | as_crispy_field }}
        </div>

        <div class="ui warning message ko hidden"
             data-bind="css: { hidden: !show_warning() }">
          <i class="fad fa-circle-exclamation icon"></i>
          {% blocktrans trimmed %}
            When switching authentication providers, user permissions granted
            through your current provider may be discarded. Ensure your new
            authentication provider is configured correctly before making this change.
          {% endblocktrans %}
        </div>
      </div>

      <input class="ui primary button"
             type="submit"
             name="submit"
             value="{% trans "Save" %}" />
    </form>
  </div>
{% endblock organization_edit_content %}