{% extends "includes/crud/table_list.html" %}

{% load trans blocktrans from i18n %}
{% load naturaltime from humanize %}

{% block top_left_menu_items %}
{% endblock top_left_menu_items %}

{% block create_button %}
  {% url "projects_integrations_create" project_slug=project.slug as create_url %}
  {% trans "Add integration" as create_text %}
  {% include "includes/crud/create_button.html" with url=create_url text=create_text %}
{% endblock create_button %}

{% block list_placeholder_icon_class %}
  fa-duotone fa-plug
{% endblock list_placeholder_icon_class %}
{% block list_placeholder_header %}
  {% blocktrans trimmed %}
    No integrations have been configured yet
  {% endblocktrans %}
  <div class="sub header">
    {% blocktrans trimmed %}
      Integrations extend the functionality of Read the Docs to other services,
      such as GitHub, GitLab, and Bitbucket
    {% endblocktrans %}
  </div>
{% endblock list_placeholder_header %}
{% block list_placeholder_text %}
  <a class="ui button"
     href="https://docs.readthedocs.io/en/stable/guides/setup/git-repo-manual.html"
     target="_blank"
     aria-label="{% trans "Learn more about connecting your Git provider in our documentation" %}">
    {% trans "Learn more" %}
  </a>
{% endblock list_placeholder_text %}

{% block list_item_right_buttons %}
  {# This URL is to the detail page for the integration or for the GitHub App page #}
  {% with url=object.get_absolute_url %}
    <a class="ui {% if not url %}disabled{% endif %} icon button"
       href="{% firstof url '#' %}"
       {% if object.is_remote_only %}target="_blank"{% endif %}>
      <i class="fa-duotone fa-wrench icon"></i>
    </a>
  {% endwith %}

  {% url 'projects_integrations_delete' project_slug=project.slug integration_pk=object.pk as form_url %}
  {% trans "Remove integration" as action_text %}
  {% blocktrans trimmed asvar content_text with description=object.get_integration_type_display %}
    Remove integration {{ description }}?
  {% endblocktrans %}
  {% include "includes/crud/remove_button.html" with id=object.pk form_url=form_url action_text=action_text content_text=content_text is_disabled=object.is_remote_only %}
{% endblock list_item_right_buttons %}

{% block list_item_icon %}
  <i class="fa-duotone fa-exchange icon"></i>
{% endblock list_item_icon %}

{% block list_item_header %}
  {# This URL is to the detail page for the integration or for the GitHub App page #}
  {% with url=object.get_absolute_url %}
    {% if url %}
      <a href="{{ url }}"
         {% if object.is_remote_only %}target="_blank"{% endif %}>
        {{ object.get_integration_type_display }}
      </a>
    {% else %}
      {# Mostly for GHA integrations that are disconnected. We have nothing to link to #}
      {{ object.get_integration_type_display }}
    {% endif %}
  {% endwith %}

  {% if object.is_remote_only %}
    {% blocktrans trimmed asvar popup %}
      This integration is managed by the provider and cannot be removed
    {% endblocktrans %}
    {% include "includes/components/config_label.html" with icon="fa-duotone fa-lock" popup=popup %}
  {% elif not object.has_sync and not object.can_sync %}
    {% blocktrans trimmed asvar popup %}
      This integration is not automatically managed and will require manual setup
    {% endblocktrans %}
    {% include "includes/components/config_label.html" with icon="fa-duotone fa-user-gear" popup=popup %}
  {% endif %}
{% endblock list_item_header %}

{% block list_item_meta_items %}
  {% if object.is_remote_only and not object.is_active %}
    {% trans "Disconnected" context "The integration is in a disconnected state" as text %}
    {% blocktrans trimmed with version=object.verbose_name asvar popup %}
      This integration is disconnected, check with your provider
    {% endblocktrans %}
    <div class="item">
      {% include "includes/components/config_label.html" with classes="red" icon="fa-solid fa-circle-exclamation" text=text popup=popup %}
    </div>
  {% elif object.is_remote_only and object.is_active %}
    {# `is_active` ensures there is a connected remote repository #}
    <div class="item">
      {# Translators: this is time since connecting this integraiton and will read "Connected 1 year, 5 months ago" #}
      {% blocktrans with time_since=object.created|naturaltime trimmed %}
        Connected {{ time_since }}
      {% endblocktrans %}
    </div>
  {% elif not object.is_remote_only %}
    <div class="item">
      {# Translators: this is the number of HTTP request/response exchanges for this integration, as in "10 exchanges" #}
      {% blocktrans with count=object.exchanges.count trimmed %}
        {{ count }} exchanges
      {% endblocktrans %}
    </div>
  {% endif %}
{% endblock list_item_meta_items %}