{% extends 'projects/base_project.html' %}
{% load static %}

{% block title %}Notifications - {{ block.super }}{% endblock %}

{% block content_project %}

<div class="row">
    <div class="col-md-3 col-sm-4">

        {% if can_manage_notifications %}
        <button type="button" class="btn btn-primary btn-block margin-bottom" data-toggle="modal" data-target="#newNotificationModal">
            <i class="fa fa-plus"></i> New Notification
        </button>
        {% endif %}

        {% if can_manage_notifications %}
        <div class="modal fade" id="newNotificationModal" tabindex="-1" role="dialog" aria-labelledby="newNotificationModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="newNotificationModalLabel">Choose notification type</h4>
                    </div>
                    <div class="modal-body">
                        <div class="notification-type-list">
                            <a href="{% url 'create_notification' org_name=request.current_organization.name project_name=project.name %}?type=email" class="notification-type-option">
                                <span class="notification-type-icon"><img src="{% static 'img/email.png' %}" alt="Email"></span>
                                <span class="notification-type-text">
                                    <span class="notification-type-title">Email</span>
                                    <span class="notification-type-desc">Receive alerts directly in your inbox.</span>
                                </span>
                            </a>
                            <a href="{% url 'create_notification' org_name=request.current_organization.name project_name=project.name %}?type=webhook" class="notification-type-option">
                                <span class="notification-type-icon"><img src="{% static 'img/webhook.png' %}" alt="Webhook"></span>
                                <span class="notification-type-text">
                                    <span class="notification-type-title">Webhook</span>
                                    <span class="notification-type-desc">Send events to your own HTTP endpoint.</span>
                                </span>
                            </a>
                            <a href="{% url 'create_notification' org_name=request.current_organization.name project_name=project.name %}?type=slack" class="notification-type-option">
                                <span class="notification-type-icon"><img src="{% static 'img/slack.png' %}" alt="Slack"></span>
                                <span class="notification-type-text">
                                    <span class="notification-type-title">Slack</span>
                                    <span class="notification-type-desc">Post messages to a Slack channel.</span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="box box-solid">
            <div class="box-header with-border">
                <h3 class="box-title"><i class="fa fa-info-circle"></i> Info</h3>
            </div>
            <div class="box-body">
                <p>Notifications are delivery channels such as email, Slack, or webhooks.</p>
                <p>They do not send anything by themselves. Add them as actions in your <a href="{% url 'automations' org_name=request.current_organization.name project_name=project.name %}">automations</a> to receive alerts or scheduled reports.</p>
            </div>
        </div>

        <div class="box box-solid">
            <div class="box-header with-border">
                <h3 class="box-title">Type</h3>
            </div>
            <div class="box-body no-padding">
                <ul class="nav nav-pills nav-stacked">
                    <li class="{% if not request.GET.type %}active{% endif %}"><a href="{% url 'notifications' org_name=request.current_organization.name project_name=project.name %}"><i class="fa fa-inbox"></i> All</a></li>
                    {% for type_value, type_label in notification_types %}
                    <li class="{% if request.GET.type == type_value %}active{% endif %}"><a href="{% url 'notifications' org_name=request.current_organization.name project_name=project.name %}?type={{ type_value }}"><img src="{% static 'img/'|add:type_value|add:'.png' %}" alt="" class="notification-filter-icon"> {{ type_label }}</a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-9 col-sm-8">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">Notifications ({{ notifications|length }})</h3>
            </div>
            <div class="box-body">
                {% if notifications %}
                <ul class="products-list product-list-in-box">
                    {% for notification in notifications %}
                        <li class="item">
                            <div class="product-img">
                                <img src="{% static 'img/'|add:notification.type|add:'.png' %}" alt="{{ notification.type }}" />
                            </div>
                            <div class="product-info">
                                {% if can_manage_notifications %}
                                <a href="{% url 'edit_notification' org_name=request.current_organization.name project_name=project.name notification=notification.name %}" class="product-title">{{ notification.name }}
                                {% else %}
                                <span class="product-title">{{ notification.name }}
                                {% endif %}
                                    {% if notification.is_enabled %}
                                    <span class="label label-success pull-right">Enabled</span>
                                    {% elif notification.is_pending_email_confirmation %}
                                    <span class="label label-warning pull-right">Pending validation</span>
                                    {% else %}
                                    <span class="label label-danger pull-right">Disabled</span>
                                    {% endif %}
                                {% if can_manage_notifications %}</a>{% else %}</span>{% endif %}
                                <span class="product-description">{{ notification.type|capfirst }} notification</span>
                          </div>
                        </li>
                    {% endfor %}
                </ul>
                {% else %}
                <p class="text-muted">No notifications yet. Create one using the button on the left.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% endblock %}