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

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

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

{% block main %}
  <h2>{% trans "Notifications" %}</h2>
  <form action="" method="POST" class="form-stacked">
    {% csrf_token %}
    <input type="hidden" name="op" value="save-settings" />

    <div class="box">
      <div class="box-header">
        <h3>{% trans "Rules" %}</h3>
      </div>
      <div class="box-content with-padding">
        {% url 'sentry-project-rules' organization.slug project.slug as link %}
        <p>{% blocktrans %}Sentry will notify you based on the <a href="{{ link }}">rules configured for this project</a>.{% endblocktrans %}</p>
      </div>
    </div>

    <div class="box">
      <div class="box-header">
        <h3>{% trans "General" %}</h3>
      </div>
      <div class="box-content with-padding">
        {{ general_form|as_crispy_errors }}

        {% for field in general_form %}
            {{ field|as_crispy_field }}
        {% endfor %}
      </div>
    </div>

    {% if digests_form %}
    <div class="box">
      <div class="box-header">
        <h3>{% trans "Digests" %}</h3>
      </div>
      <div class="box-content with-padding">
        <p>
          Sentry will automatically digest notifications sent by some services to avoid flooding your inbox with individual issue notifications.
          To control how frequently notifications are delivered, use the sliders below.
        </p>

        {{ digests_form|as_crispy_errors }}

        <div class="row">
          {% for field in digests_form %}
            <div class="col-md-6">
              {{ field|as_crispy_field }}
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}

    <fieldset class="form-actions">
      <button type="submit" class="btn btn-primary btn-lg">{% trans "Save Changes" %}</button>
    </fieldset>
  </form>

  <script>
  (function(){
    var formatMinutes = function(val) {
      val = parseInt(val, 10);
      return val + ' minute' + (val != 1 ? 's' : '');
    };

    $('input[type=range]').each(function(n, el){
      var $el = $(el),
          min = parseInt($el.attr('min'), 10),
          max = parseInt($el.attr('max'), 10),
          step = parseInt($el.attr('step'), 10),
          $value = $('<span class="value"></span>');

      $el.on('slider:ready', function(event, data) {
        console.log(data);
        $value.appendTo(data.el);
        $value.html(formatMinutes(data.value));
      }).on('slider:changed', function(event, data) {
        $value.html(formatMinutes(data.value));
      }).simpleSlider({
        range: [min, max],
        step: step,
        snap: true
      });
    });
  }());
</script>

  {% 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 }}
        </form>
      </div>
    </div>
  {% endfor %}

  {% 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 %}
{% endblock %}
