{% extends "sentry/bases/organization.html" %}

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

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

{% block org_apikeys_nav %}active{% endblock %}

{% block main %}
  <div class="page-header">
    <form class="pull-right" method="POST" action="">
      {% csrf_token %}
      <input type="hidden" name="op" value="newkey" />
      <button type="submit" class="btn btn-primary">New API Key</button>
    </form>

    <h2>{% trans "API Keys" %}</h2>
  </div>

  <p>API keys grant access to the <a href="https://docs.getsentry.com/hosted/api/">developer web API</a>. If you're looking to configure a Sentry client, you'll need a client key which is available in your project settings.</p>

      {% if key_list %}
      <table class="table api-key-list">
        <colgroup>
          <col style="width: 40%"></col>
          <col style="width: 40%"></col>
          <col style="width: 20%"></col>
        </colgroup>
        <tbody>
        {% for key in key_list %}
          <tr>
            <td>
              <h5><a href="{% url 'sentry-organization-api-key-settings' organization.slug key.id %}">{{ key.label }}</a></h5>
            </td>
            <td>
              <div class="form-control disabled auto-select">{{ key.key }}</div>
            </td>
            <td class="align-right">
              <a href="{% url 'sentry-organization-api-key-settings' organization.slug key.id %}" class="btn btn-default btn-sm" style="margin-right: 4px">Edit Key</a>
              <form class="pull-right" method="POST" action="" onsubmit="return confirm('Are you sure you want to remove this API key?');">
                {% csrf_token %}
                <input type="hidden" name="op" value="removekey" />
                <input type="hidden" name="kid" value="{{ key.id }}" />
                <button class="btn btn-default btn-sm"><span class="icon-trash"></span></button>
              </form>
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
      {% else %}
        <div class="blankslate well">
          There are no API keys for this organization.
        </div>
      {% endif %}

{% endblock %}
