{% extends "projects/project_edit_base.html" %}

{% load blocktrans trans from i18n %}
{% load as_crispy_field crispy from crispy_forms_tags %}

{% block title %}
  {{ project.name }} - {% trans "Addons" %}
{% endblock title %}

{% block project_addons_active %}
  active
{% endblock project_addons_active %}
{% block project_edit_content_header %}
  {% trans "Addons" %}
{% endblock project_edit_content_header %}

{% block project_edit_sidebar_help_topics %}
  {% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/addons.html" text="Addons documentation" is_external=True class="item" %}
  {% include "includes/elements/link.html" with url="https://about.readthedocs.com/blog/2024/04/enable-beta-addons/" text="Blog post: Empower your documentation with addons" is_external=True class="item" %}
  {% include "includes/elements/link.html" with url="https://blog.readthedocs.com/addons-flyout-menu-beta/" text="Blog post: Addons flyout menu beta" is_external=True class="item" %}
{% endblock project_edit_sidebar_help_topics %}

{% block project_edit_content %}

  <form class="ui form"
        method="post"
        action="{% url 'projects_addons' project_slug=project.slug %}">
    {% csrf_token %}

    <div>
      <p>
        {# Translators: Addons is a proper noun and should be capitalized #}
        {% blocktrans trimmed %}
          Addons provide features on your project's hosted documentation,
          such as our flyout navigation menu, search, analytics, and more.
        {% endblocktrans %}
      </p>

      {{ form.enabled|as_crispy_field }}
      {{ form.project|as_crispy_field }}
    </div>

    {% if form.enabled.value == True %}
      <div class="ui top attached stackable centered fluid wrapping menu"
           data-bind="semanticui: {tabs: {history: true, autoTabActivation: false}}">
        <a class="active item" data-tab="flyout">{% trans "Flyout menu" %}</a>
        <a class="item" data-tab="search">{% trans "Search" %}</a>
        <a class="item" data-tab="notifications">{% trans "Notifications" %}</a>
        <a class="item" data-tab="analytics">{% trans "Analytics" %}</a>
        <a class="item" data-tab="docdiff">{% trans "Visual diff" %}</a>
        <a class="item" data-tab="filetreediff">{% trans "File tree diff" %}</a>
        <a class="item" data-tab="link-previews">{% trans "Link previews" %}</a>
        <a class="item" data-tab="hotkeys">{% trans "Hotkeys" %}</a>
        <a class="item" data-tab="custom-script">{% trans "Custom script" %}</a>
        <a class="item" data-tab="advanced">{% trans "Advanced" %}</a>
      </div>
    {% endif %}

    {% comment %}
      Conditionally render this as a bottom attached segment if Addons are enabled.
      Otherwise, this will render all of the fields in hidden tab divs, so submit
      and form handling work.
    {% endcomment %}
    <div {% if form.enabled.value %}class="ui bottom attached segment"{% endif %}>

      {% block addons_flyout %}
        <div class="ui tab" data-tab="flyout">
          {{ form.flyout_enabled | as_crispy_field }}
          {{ form.flyout_sorting | as_crispy_field }}
          {{ form.flyout_sorting_latest_stable_at_beginning | as_crispy_field }}
          {{ form.flyout_sorting_custom_pattern | as_crispy_field }}
          {{ form.flyout_position | as_crispy_field }}
        </div>
      {% endblock addons_flyout %}

      {% block addons_search %}
        <div class="ui tab" data-tab="search">
          {{ form.search_enabled | as_crispy_field }}
          {{ form.search_show_subprojects_filter | as_crispy_field }}
        </div>
      {% endblock addons_search %}

      {% block addons_notifications %}
        <div class="ui tab" data-tab="notifications">
          {{ form.notifications_enabled | as_crispy_field }}
          {{ form.notifications_show_on_external | as_crispy_field }}
          {{ form.notifications_show_on_latest | as_crispy_field }}
          {{ form.notifications_show_on_non_stable | as_crispy_field }}
        </div>
      {% endblock addons_notifications %}

      {% block addons_analytics %}
        <div class="ui tab" data-tab="analytics">
          {{ form.analytics_enabled | as_crispy_field }}
        </div>
      {% endblock addons_analytics %}

      {% block addons_docdiff %}
        <div class="ui tab" data-tab="docdiff">
          {{ form.doc_diff_enabled | as_crispy_field }}
        </div>
      {% endblock addons_docdiff %}

      {% block addons_filetreediff %}
        <div class="ui tab" data-tab="filetreediff">
          {{ form.filetreediff_enabled | as_crispy_field }}
          {{ form.filetreediff_ignored_files | as_crispy_field }}
        </div>
      {% endblock addons_filetreediff %}

      {% block addons_link_previews %}
        <div class="ui tab" data-tab="link-previews">
          {{ form.linkpreviews_enabled | as_crispy_field }}
          {{ form.linkpreviews_selector | as_crispy_field }}
        </div>
      {% endblock addons_link_previews %}

      {% block addons_hotkeys %}
        <div class="ui tab" data-tab="hotkeys">
          {{ form.hotkeys_enabled | as_crispy_field }}
        </div>
      {% endblock addons_hotkeys %}

      {% block addons_custom_script %}
        <div class="ui tab" data-tab="custom-script">
          {{ form.customscript_enabled | as_crispy_field }}
          {{ form.customscript_src | as_crispy_field }}
        </div>
      {% endblock addons_custom_script %}

      {% block addons_advanced %}
        <div class="ui tab" data-tab="advanced">
          {{ form.options_root_selector|as_crispy_field }}
        </div>
      {% endblock addons_advanced %}
    </div>

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

{% endblock project_edit_content %}