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

{% block title %}Manage Notification - {{ block.super }}{% endblock %}

{% block content_project %}

<form method="post">
    {% csrf_token %}
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">General Settings</h3>
                    <div class="box-tools pull-right">
                        {% if "is_enabled" in form.fields %}
                        {{ form.is_enabled|as_crispy_field }}
                        {% endif %}
                    </div>
                </div>
                <div class="box-body">
                    <div class="form-group">
                        <label class="control-label">Type</label>
                        <div class="notification-type-readonly">
                            <img src="{% static 'img/'|add:type|add:'.png' %}" alt="{{ type }}">
                            <span>{{ type|capfirst }}</span>
                        </div>
                    </div>
                    {% if email_pending_confirmation %}
                    <div class="alert alert-warning">
                        This notification will be enabled once the recipient confirms the subscription by clicking the link in the confirmation email.
                        <a href="{% url 'resend_notification_confirmation' org_name=request.current_organization.name project_name=project.name notification=notification_url_name %}">Resend the confirmation email</a>.
                    </div>
                    {% endif %}
                    {{ form.name|as_crispy_field }}
                    <div class="extras">
                        {% with template_name="projects/notifications/_"|add:type|add:".html" %}
                        {% include template_name %}
                        {% endwith %}
                    </div>
                    {% if object %}
                    <div class="pull-left">
                        <a href="{% url 'delete_notification' org_name=request.current_organization.name project_name=project.name notification=notification_url_name %}" class="btn btn-danger">Delete</a>
                    </div>
                    {% endif %}
                    <div class="pull-right">
                        <a href="{% url 'notifications' org_name=request.current_organization.name project_name=project.name %}" class="btn btn-default">Cancel</a>
                        <button type="submit" name="action" value="save" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-flask"></i> Try</h3>
                </div>
                <div class="box-body">
                    <p class="text-muted">Send a test without saving. For webhooks and Slack you will see the HTTP request and response below.</p>
                    <p>
                        <button type="submit" name="action" value="try" class="btn btn-info btn-block"><i class="fa fa-paper-plane"></i> Try</button>
                    </p>
                    {% if try_result %}
                    <div class="alert alert-{% if try_result.success %}success{% else %}error{% endif %}">
                        <i class="fa {% if try_result.success %}fa-check-circle{% else %}fa-exclamation-circle{% endif %}"></i>
                        {{ try_result.summary }}
                    </div>
                    {% if try_result.channel_type == "email" and try_result.details %}
                        <div>
                            {% if try_result.details.recipient %}
                            <strong>Recipient</strong>
                            <p>{{ try_result.details.recipient }}</p>
                            {% endif %}
                            {% if try_result.details.subject %}
                            <strong>Subject</strong>
                            <p>{{ try_result.details.subject }}</p>
                            {% endif %}
                            {% if try_result.details.error %}
                            <strong>Error</strong>
                            <p><code class="try-result-code">{{ try_result.details.error }}</code></p>
                            {% endif %}
                        </div>
                    {% elif try_result.details.request_url %}
                        <div>
                            <strong>URL</strong>
                            <p><code class="try-result-code">{{ try_result.details.request_url }}</code></p>
                            {% if try_result.details.request_method %}
                            <strong>Method</strong>
                            <p>{{ try_result.details.request_method }}</p>
                            {% endif %}
                            {% if "response_status" in try_result.details %}
                            <strong>HTTP status</strong>
                            <p>{{ try_result.details.response_status }}</p>
                            {% endif %}
                            {% if try_result.details.error %}
                            <strong>Error</strong>
                            <p><code class="try-result-code">{{ try_result.details.error }}</code></p>
                            {% endif %}
                        </div>
                        {% if try_result.details.request_headers %}
                        <p class="text-muted" style="margin-bottom: 4px;"><strong>Request headers</strong></p>
                        <pre class="pre-scrollable" style="max-height: 120px; font-size: 11px;">{% for hk, hv in try_result.details.request_headers.items %}{{ hk }}: {{ hv }}
{% endfor %}</pre>
                        {% endif %}
                        {% if try_result.details.request_payload %}
                        <p class="text-muted" style="margin-bottom: 4px;"><strong>Request body</strong></p>
                        <pre class="pre-scrollable" style="max-height: 200px; font-size: 11px;">{{ try_result.details.request_payload }}</pre>
                        {% endif %}
                        {% if try_result.details.response_headers %}
                        <p class="text-muted" style="margin-bottom: 4px;"><strong>Response headers</strong></p>
                        <pre class="pre-scrollable" style="max-height: 120px; font-size: 11px;">{% for hk, hv in try_result.details.response_headers.items %}{{ hk }}: {{ hv }}
{% endfor %}</pre>
                        {% endif %}
                        {% if try_result.details.response_body %}
                        <p class="text-muted" style="margin-bottom: 4px;"><strong>Response body</strong></p>
                        <pre class="pre-scrollable" style="max-height: 200px; font-size: 11px;">{{ try_result.details.response_body }}</pre>
                        {% endif %}
                    {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</form>

{% endblock %}