{% 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;
    }
    </style>
    <form action="" method="post" class="">
        {% csrf_token %}

        <p>{% blocktrans %}Notifications are generally sent when a new event is
            seen, an already resolved event has changed to unresolved, or a
            system-wide spike in events is detected.{% endblocktrans %}</p>

        {% with settings_form as form %}
            <fieldset>
                <h4>{% trans "General" %}</legend></h4>
                {% include "sentry/partial/form_base.html" %}
            </fieldset>
        {% endwith %}

        {% if project_forms %}
            <hr />
            <h4>{% trans "Mail" %}</h4>
            <p>{% blocktrans %}Choose which projects you wish to receive email notifications for, as well as an alternative email address to send to.{% endblocktrans %}</p>
            <p><small>{% blocktrans %}Note: You will never receive notifications if a project has them disabled (via the Project settings){% endblocktrans %}</small></p>

            {% for project, form in project_forms %}
                {{ form|as_crispy_errors }}
            {% endfor %}
            {% for project, form in project_forms %}
                {% ifchanged project.team %}
                    {% if not forloop.first %}
                        </table>
                    {% endif %}
                    <h5>{{ project.team.name }} <small>{{ project.organization.name }}</small></h5>

                    <table class="table table-bordered table-striped" style="margin-bottom: 20px">
                        <thead>
                            <tr>
                                <th style="width:31px">
                                    <input type="checkbox" data-action="check-all-projects">
                                </th>
                                <th>{% trans "Project Name" %}</th>
                                <th style="width:150px;overflow:hidden;text-align:right">
                                    {% trans "Email Address" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                {% endifchanged %}
                <tr>
                    <td>{{ form.alert }}</td>
                    <td><label for="{{ form.alert.auto_id }}">{{ project.name }} <small>&mdash; {{ project.slug }}</small></label></td>
                    <td style="text-align:right">
                        <a href="javascript:void(0)" data-target="{{ form.email.auto_id }}" data-toggle="change-target-value">
                            {% if form.email.value %}{{ form.email.value }}{% else %}<em>Default</em>{% endif %}
                        </a>
                        {{ form.email }}
                    </td>
                </tr>
            {% endfor %}
            </tbody></table>
        {% endif %}

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

        <fieldset class="form-actions">
            <button type="submit" class="btn btn-primary">{% trans "Save Changes" %}</button>
        </fieldset>
    </form>
    <script>
    $(function(){
        $('form a[data-toggle="change-target-value"]').click(function(){
            var $this = $(this);
            var $target = $('#' + $this.data('target'));
            var result = window.prompt('Enter an email address', $target.val());
            $target.val(result || '');
            if (result) {
                $this.text(result);
            } else {
                $this.html('<em>Default</em>');
            }
        });
        $('input[data-action="check-all-projects"]').click(function(){
            $(this).parents('table').find('tbody input[type=checkbox]').prop('checked', $(this).prop('checked'))
        });
    });
    </script>
{% endblock %}
