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

{% load i18n %}

{% block project_edit_content_subheader %}
  <div class="ui breadcrumb">
    <div class="active section">{{ integration.get_integration_type_display }}</div>
  </div>
{% endblock project_edit_content_subheader %}

{% block project_edit_content %}
  {% if integration.has_sync %}
    {% if integration.can_sync %}
      <p>
        {% blocktrans trimmed %}
          This integration is being managed automatically by Read the Docs. If
          it isn't functioning correctly, try re-syncing the webhook.
        {% endblocktrans %}
      </p>
    {% else %}
      {% comment %}
        Display information for manual webhook set up if either case is true:

        * Integration doesn't have the ability to sync
        * Integration has ability to sync, but we don't have the data returned
          from the provider API on webhook creation (or webhook was automatically
          created on new data from an old webhook)
      {% endcomment %}
      <p>
        {% blocktrans trimmed %}
          This integration is not managed by Read the Docs currently.
          If this integration is not functioning correctly,
          you can try re-syncing it. Otherwise you'll need to update
          the configuration on your repository.
        {% endblocktrans %}
      </p>
    {% endif %}
  {% endif %}

  <p>
    {% blocktrans trimmed %}
      To manually configure this webhook with your provider, use the
      following information:
    {% endblocktrans %}
  </p>

  <div class="ui segment">
    <div class="ui list">
      <div class="item">
        <div class="content">
          <div class="header">{% trans "Webhook URL" %}</div>
          <div class="description">
            {% url 'api_webhook' project_slug=project.slug integration_pk=integration.pk as webhook_url %}
            {% with PUBLIC_API_URL|add:webhook_url as integration_url %}
              <div class="ui fluid action input">
                <input type="text" readonly value="{{ integration_url }}" />
                <button class="ui right icon button"
                        data-clipboard-text="{{ integration_url }}"
                        data-content="{% trans "Copied!" %}">
                  <i class="fas fa-copy icon"></i>
                </button>
              </div>
            {% endwith %}
          </div>
        </div>
      </div>

      {% if not integration.has_sync %}
        {# For generic webhooks #}
        <div class="item">
          <div class="content">
            <div class="header">{% trans "Secret" %}</div>
            <div class="description">
              <div class="ui fluid action input">
                <input type="text" readonly value="{{ integration.token }}" />
                <button class="ui right icon button"
                        data-clipboard-text="{{ integration.token }}"
                        data-content="{% trans "Copied!" %}">
                  <i class="fas fa-copy icon"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      {% elif integration.secret %}
        <div class="item">
          <div class="content">
            <div class="header">{% trans "Secret" %}</div>
            <div class="description">
              <div class="ui fluid action input">
                <input type="text" readonly value="{{ integration.secret }}" />
                <button class="ui right icon button"
                        data-clipboard-text="{{ integration.secret }}"
                        data-content="{% trans "Copied!" %}">
                  <i class="fas fa-copy icon"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      {% endif %}
    </div>
  </div>

  {% if integration.has_sync and not integration.secret %}
    <div class="ui warning message">
      {% blocktrans trimmed %}
        This integration does not have a secret,
        the authenticity of the incoming webhook cannot be verified.
        <strong>Click on "Resync webhook" to generate a secret.</strong>
        Read more in our <a href="https://blog.readthedocs.com/security-update-on-incoming-webhooks/">blog post</a>.
      {% endblocktrans %}
    </div>
  {% endif %}

  {% if not integration.can_sync %}
    <p>
      {% blocktrans trimmed %}
        For more information on manually configuring a webhook, refer to
        <a href="https://docs.readthedocs.io/page/webhooks.html" target="_blank">our webhook documentation.</a>
      {% endblocktrans %}
    </p>
  {% endif %}

  {% if integration.has_sync %}
    <form class="ui form"
          method="post"
          action="{% url 'projects_integrations_webhooks_sync' project_slug=project.slug integration_pk=integration.pk %}">
      {% csrf_token %}
      <button class="ui button">
        <i class="fa-duotone fa-refresh icon"></i>
        {% trans "Resync webhook" %}
      </button>
    </form>
  {% endif %}

  <h3 class="ui small header">{% trans "Recent Activity" %}</h3>

  <div class="ui segment">
    <div class="ui list">
      {% for exchange in integration.exchanges.all %}
        <div class="item">
          <span class="ui {% if exchange.failed %}red{% else %}green{% endif %} label">{{ exchange.status_code }}</span>
          <a href="{% url 'projects_integrations_exchanges_detail' project_slug=project.slug integration_pk=integration.pk exchange_pk=exchange.pk %}">
            {% blocktrans trimmed with date=exchange.date|timesince %}
              {{ date }} ago
            {% endblocktrans %}
          </a>
        </div>
      {% empty %}
        <div class="item">{% trans "There is no recent activity" %}</div>
      {% endfor %}
    </div>
  </div>
{% endblock project_edit_content %}