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

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

{% block title %}{% trans "Tags" %} | {{ block.super }}{% endblock %}

{% block main %}
  <h2>{% trans "Tags" %}</h2>

  {% if tag_list %}
    <p>{% blocktrans with link='https://docs.sentry.io/hosted/learn/context/' %}Each event in Sentry may be annotated with various tags (key and value pairs). Learn how to <a href="{{ link }}">add custom tags</a>.{% endblocktrans %}</p>

    <form action="" method="post">
      {% csrf_token %}
      {{ form|as_crispy_errors }}

      <div class="panel panel-default">
        <table class="table">
          <thead>
            <tr>
              <th>Tags</th>
              <th style="width:20px">&nbsp;</th>
            </tr>
          </thead>
          <tbody>
            {% for tag in tag_list %}
              <tr data-tagkey="{{ tag.key }}">
                <td>
                  <h5 style="margin-bottom: 10px;">{{ tag.get_label }} <small>({{ tag.key }})</small></h5>
                  <small>{{ tag.values_seen|small_count }} unique value(s)</small>
                </td>
                <td>
                {% comment %}
                  Make sure this onclick is wrapped in single quotes
                  and not double quotes becuase the value is being
                  JSON encoded and can't put double quotes within
                  double quotes.
                {% endcomment %}
                  <a class="btn btn-sm btn-default" href="javascript:void(0)"
                     onclick='removeTagKey({{ tag.key|to_json }})'><span class="icon icon-trash"></span></a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <button type="submit" name="op" value="save" class="btn btn-primary">{% trans "Save Changes" %}</button>
    </form>
  {% else %}
    <p>{% trans "We have not yet recorded any tags for this project." %}</p>
  {% endif %}

  <script>
  var removeTagKey = function(keyName) {
    if (!confirm('Are you sure you wish to delete all data for this tag?')) {
      return;
    }

    $.ajax({
      url: '/api/0/projects/{{ organization.slug }}/{{ project.slug }}/tags/' + keyName + '/',
      method: 'DELETE',
    });
    $('.tag-list tr').each(function(_, el){
      var $el = $(el);
      if ($el.attr('data-tagkey') == keyName) {
        $el.remove();
      }
    });
  };
  </script>
{% endblock %}
