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

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

{% block title %}{% trans "Notification Settings" %} | {{ block.super }}{% endblock %}

{% block main %}
    <style type="text/css">
    table label,
    table input[type=checkbox] {
        margin: 0;
    }
    table caption {
        font-weight: normal;
        text-align: left;
        font-size: 16px;
        padding-bottom: 10px;
    }
    td label small {
        font-weight: normal;
    }
    table.notifications-fine-tuning {
      margin-bottom: 20px;
    }
    table.notifications-fine-tuning > tbody > tr > td,
    table.notifications-fine-tuning > thead > tr > th {
      padding: 8px 10px;
      font-size: 14px;
    }
    table.notifications-fine-tuning > tbody > tr > td.route {
      padding: 0;
    }
    table.notifications-fine-tuning > tbody > tr > td.route .form-control {
      padding: 8px 10px;
      border: 1px solid #fff;
      border-width: 0 1px;
      box-shadow: none;
      top: 0;
      border-radius: 0;
    }
    table.notifications-fine-tuning > tbody > tr > td.route .form-control .select2-choice .select2-arrow {
      right: -3px;
    }
    table.notifications-fine-tuning > tbody > tr > td.route .form-control .select2-choice > .select2-chosen {
      margin-right: 20px;
    }
    table.notifications-fine-tuning > tbody > tr > td.route .form-control.select2-dropdown-open {
      border-color: #c9c0d1;
    }
    td .form-group { margin-bottom: 0; }
    </style>
    <form action="" method="post" class="">
        {% csrf_token %}

        <h4>{% trans "Alerts" %}</h4>

        <p>Alerts are generated based on a project's rules, defined in <strong>[Project] &raquo; Settings &raquo; Rules</strong>.</p>

        {{ settings_form.subscribe_by_default|as_crispy_field }}

        <hr />

        <h4>{% trans "Workflow" %}</h4>

        <p>{% blocktrans %}Workflow notifications are separate from alerts and are generated for issue updates, such as:{% endblocktrans %}</p>

        <ul>
          <li>{% trans "Assignment" %}</li>
          <li>{% trans "Comments" %}</li>
          <li>{% trans "Regressions" %}</li>
          <li>{% trans "Resolution" %}</li>
        </ul>

        {{ settings_form.workflow_notifications|as_crispy_field }}

        {{ settings_form.self_notifications|as_crispy_field }}

        <p>{% blocktrans %}You may subscribe (or unsubscribe) from individual issues on their respective pages.{% endblocktrans %}</p>

        <hr />

        <h4>{% trans "Weekly Reports" %}</h4>

        <p>{% blocktrans %}Reports contain a summary of what's happened within your organization over the last week.{% endblocktrans %}</p>

        {{ reports_form.organizations|as_crispy_field }}

        <hr />

        <h4>{% trans "Fine Tuning" %}</h4>

        <p>Use the settings below to fine tune notification settings per-project. You may add or verify additional email addresses via the <a href="{% url "sentry-account-settings-emails" %}">Emails</a> settings.</p>

        {% for project, form in project_forms %}
            {{ form|as_crispy_errors }}
        {% endfor %}

        {% for project, form in project_forms %}
            {% ifchanged project.organization %}
                {% if not forloop.first %}
                    </table>
                {% endif %}

                <table class="table notifications-fine-tuning">
                    <thead>
                        <tr>
                            <th>{% trans "Project" %}</th>
                            <th style="width:300px;overflow:hidden;text-align:right">
                              {% trans "Email Address" %}
                            </th>
                            <th style="width:50px;text-align:center">
                              <a data-toggle="alert">Alerts</a>
                            </th>
                            <th style="width:50px;text-align:center">
                              <a data-toggle="workflow">Workflow</a>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
            {% endifchanged %}
            <tr>
              <td>
                <a href="{% absolute_uri '/{}/{}/settings/alerts/' project.organization.slug project.slug %}">{{ project.organization.slug}} / {{ project.slug }}</a>
              </td>
              <td style="text-align:right" class="route">
              {% with form.email as field %}
                {{ field|as_crispy_field }}
              {% endwith %}
              </td>
              <td style="text-align:center">{{ form.alert }}</td>
              <td style="text-align:center">{{ form.workflow }}</td>
            </tr>
        {% endfor %}
        </tbody></table>

        {% for form in ext_forms %}
            <h4>{{ form.get_title }}</h4>
            {% with form.get_description as description %}
                {% if description %}
                    {{ description|linebreaks }}
                {% endif %}
            {% endwith %}
            {% include "sentry/partial/form_base.html" %}
        {% endfor %}

        {% block hosted_notifications %}
        {% endblock %}

        <fieldset class="form-actions">
            <button type="submit" class="btn btn-primary">{% trans "Save Changes" %}</button>
        </fieldset>
    </form>
    <script>
    $(function(){

      function findCheckboxes(parent, match) {
        return $(parent).parents('table')
          .find('tbody input[type="checkbox"]')
          .filter(function() {
            return this.name.indexOf(match) !== -1;
          });
      }

      function setupChecker(pattern) {
        $('form a[data-toggle="' + pattern + '"]').click(function(e){
          var checked = $(this).data('checked');
          findCheckboxes(this, pattern).prop('checked', !checked);
          $(this).data('checked', !checked);
        }).each(function() {
          var boxes = findCheckboxes(this, pattern);
          var checkedBoxes = boxes.filter(function(){
            return $(this).is(':checked');
          });
          var defaultChecked = (boxes.length === checkedBoxes.length);
          $(this).data('checked', defaultChecked);
        });
      }

      setupChecker('alert');
      setupChecker('workflow');
    });
    </script>
{% endblock %}
