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

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

{% block title %}{% trans "Issue Tracking" %} | {{ block.super }}{% endblock %}

{% block main %}
  <h2>{% trans "Issue Tracking" %}</h2>

  <p>Enabling Issue Tracking will let you quickly create tasks within your existing tools.
    You'll find the new action under <span class="btn btn-default btn-sm">More <span class="icon icon-arrow-down"></span></span>
    on an issue's details page. Once you create an issue, you'll find a helpful annotation
    and link to the task in your project management tool. </p>

  {% if enabled_plugins or other_plugins %}
    {% for plugin, content in enabled_plugins %}
      <div class="box">
        <div class="box-header">
          {% if plugin.can_disable %}
            <form method="POST" class="pull-right">
              {% csrf_token %}
              <input type="hidden" name="plugin" value="{{ plugin.slug }}" />
              <button type="submit" class="btn btn-sm btn-default" name="op" value="disable">Disable</button>
            </form>
          {% endif %}
          <h3>{{ plugin.get_title }}</h3>
        </div>
        <div class="box-content with-padding">
          {{ content }}
        </div>
      </div>
    {% endfor %}

    <div id="issue_plugins"></div>

    {% if other_plugins %}
      <div class="box">
        <div class="box-header">
          <h3>{% trans "Inactive Integrations" %}</h3>
        </div>
        <div class="box-content with-padding">
          <ul class="integration-list">
            {% for plugin in other_plugins %}
              <li>
                <form method="POST">
                  {% csrf_token %}
                  <input type="hidden" name="op" value="enable" />
                  <input type="hidden" name="plugin" value="{{ plugin.slug }}" />
                  <button type="submit">{{ plugin.get_title }}</button>
                </form>
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}
  {% else %}
    <div class="alert alert-info alert-block">
      <p>There are no issue tracker integrations available. Ask your Sentry team about integrating with your favorite project management tools.</p>
    </div>
  {% endif %}

  <script>
  $(function(){
    ReactDOM.render(React.createFactory(Sentry.ProjectIssueTracking)({
      project: {% serialize project %},
      organization: {% serialize organization %},
      dataList: {% serialize issue_v2_plugins %}
    }), document.getElementById('issue_plugins'));
  });
  </script>
{% endblock %}
