{% 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.getsentry.com/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 }}

      <table class="table tag-list">
        <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>
              <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 %}
      </table>

      <fieldset class="form-actions">
        <button type="submit" name="op" value="save" class="btn btn-primary">{% trans "Save Changes" %}</button>
      </fieldset>
    </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 %}
