{% extends "sentry/projects/manage.html" %}

{% load i18n %}
{% load sentry_helpers %}

{% block title %}{% trans "Client Keys" %} | {{ block.super }}{% endblock %}

{% block main %}
  {% if ACCESS.project_write %}
  <form method="post" class="pull-right" action="{% url 'sentry-new-project-key' project.organization.slug project.slug %}">
  {% csrf_token %}
  <button type="submit" class="btn btn-primary" style="margin-top: -3px;">{% trans "Generate New Key" %}</button>
  </form>
  {% endif %}
  <h2>{% trans "Client Keys" %}</h2>

  <p>To send data to Sentry you will need to configure an SDK with a client key (usually referred to as the
    <code>SENTRY_DSN</code> value). For more information on integrating Sentry with your application take
    a look at our <a href="https://docs.getsentry.com">documentation</a>.</p>

    <div class="client-key-list">
      {% for key in key_list|dictsortreversed:"is_active" %}
        <div class="client-key-item{% if not key.is_active %} disabled{% endif %}">
          <div class="pull-right">
            <a class="btn btn-default btn-sm" href="{% url 'sentry-edit-project-key' project.organization.slug project.slug key.id %}">{% trans "Details" %}</a>
            {% if ACCESS.project_write %}
              {% if key.is_active %}
              <form method="POST" action="{% url 'sentry-disable-project-key' project.organization.slug project.slug key.id %}" style="display:inline">
                {% csrf_token %}
                <input type="submit" class="btn btn-default btn-sm" value="{% trans "Disable" %}">
              </form>
              {% else %}
              <form method="POST" action="{% url 'sentry-enable-project-key' project.organization.slug project.slug key.id %}" style="display:inline">
                {% csrf_token %}
                <input type="submit" class="btn btn-default btn-sm" value="{% trans "Enable" %}">
              </form>
              {% endif %}
            {% endif %}
            {% if ACCESS.project_write %}
              <form method="POST" action="{% url 'sentry-remove-project-key' project.organization.slug project.slug key.id %}" style="display:inline">
                {% csrf_token %}
                <input type="submit" class="btn btn-default btn-sm btn-revoke" value="{% trans "Revoke" %}">
              </form>
            {% endif %}
          </div>
          {% if key.label %}
            <h5><a href="{% url 'sentry-edit-project-key' project.organization.slug project.slug key.id %}">{{ key.label }}</a>{% if not key.is_active %} <small><i class="icon-ban"></i> Disabled</small>{% endif %}</h5>
          {% else %}
            <h5><a href="{% url 'sentry-edit-project-key' project.organization.slug project.slug key.id %}">{{ key.public_key }}</a>{% if not key.is_active %} <small><i class="icon-ban"></i> Disabled</small>{% endif %}</h5>
          {% endif %}

          <div class="form-group">
            <label>{% trans "DSN" %}</label>
            <div class="form-control disabled auto-select">{{ key.dsn_private }}</div>
          </div>

          <div class="form-group">
            <label>{% trans "DSN (Public)" %}</label>
            <div class="form-control disabled auto-select">{{ key.dsn_public }}</div>
            <div class="help-block">{% blocktrans with 'https://github.com/getsentry/raven-js' as link %}Use your public DSN with browser-based clients such as <a href="{{ link }}">raven-js</a>.{% endblocktrans %}</div>
          </div>

          {% if organization.flags.early_adopter %}
          <div class="form-group">
            <label>{% trans "CSP Endpoint" %}</label>
            <div class="form-control disabled auto-select">{{ key.csp_endpoint }}</div>
            <div class="help-block">{% blocktrans %}Use your CSP endpoint in the <code>report-uri</code> directive in your <code>Content-Security-Policy</code> header.{% endblocktrans %}</div>
          </div>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  {% endblock %}
