{% extends "base_project.html" %}
{% load compress humanize static hc_extras %}

{% block title %}Integrations - {{ site_name }}{% endblock %}


{% block content %}
<div class="row">
{% if messages %}
<div class="col-sm-12">
    {% for message in messages %}
        <p class="alert alert-{{ message.tags }}">{{ message }}</p>
    {% endfor %}
</div>
{% endif %}

<div class="col-sm-12">
    {% if channels %}
    <table class="table channels-table {% if rw %}rw{% endif %}">
        <tr>
            <th></th>
            <th class="th-name">Name, Details</th>
            <th class="th-checks">Assigned Checks</th>
            <th>Status</th>
            <th>Last Notification</th>
            <th></th>
        </tr>
        {% for ch in channels %}
        <tr class="channel-row kind-{{ ch.kind }}">
            <td class="icon-cell">
                <img src="{% static ch.icon_path %}" alt="{{ ch.get_kind_display }}" class="kind-{{ ch.kind }}" />
            </td>
            <td>
                <div class="edit-name" data-toggle="modal" data-target="#name-{{ ch.code }}">
                    {% if ch.name %}
                    {{ ch.name }}
                    {% else %}
                    <div class="unnamed">unnamed</div>
                    {% endif %}
                    <div class="channel-details-mini">
                    {% include "front/channel_description.html" with ch=ch %}
                    </div>
                </div>
            </td>
            <td>
                <div class="edit-checks"
                     data-url="{% url 'hc-channel-checks' ch.code %}">
                     {{ ch.n_checks }} check{{ ch.n_checks|pluralize }}
                </div>
            </td>
            <td>
                {% if ch.disabled %}
                    <span class="label label-danger">Disabled</span>
                {% elif ch.kind == "email" and not ch.email_verified %}
                    <span class="label label-default">Unconfirmed</span>
                {% else %}
                    Ready to deliver
                {% endif %}
            </td>
            <td>
                {% if ch.last_notify %}
                    {% if ch.last_error %}
                    <span class="text-danger" data-toggle="tooltip" title="{{ ch.last_error }}">
                        <strong>Failed</strong>, {{ ch.last_notify|naturaltime }}
                    </span>
                    {% else %}
                    Delivered, {{ ch.last_notify|naturaltime }}
                    {% endif %}
                {% else %}
                Never
                {% endif %}
                {% if ch.kind == "sms" or ch.kind == "whatsapp" %}
                    <p>Used {{ profile.sms_sent_this_month }} of {{ profile.sms_limit }} sends this month.</p>
                {% endif %}
                {% if ch.kind == "call" %}
                    <p>Used {{ profile.calls_sent_this_month }} of {{ profile.call_limit }} phone calls this month.</p>
                {% endif %}
            </td>
            <td class="actions">
                {% if ch.is_editable and rw %}
                <a class="btn btn-sm btn-default" href="{% url 'hc-edit-channel' ch.code %}">
                    {% if ch.kind == "email" and ch.disabled %}Fix&hellip;{% else %}Edit{% endif %}
                </a>
                {% endif %}
                <form action="{% url 'hc-channel-test' ch.code %}" method="post">
                    {% csrf_token %}
                    <button
                        class="btn btn-sm btn-default"
                        data-toggle="tooltip"
                        title="Send a test notification using this integration"
                        type="submit">
                        Test!
                    </button>
                </form>
                {% if rw %}
                <button
                    data-kind="{{ ch.get_kind_display }}"
                    data-url="{% url 'hc-remove-channel' ch.code %}"
                    class="btn btn-sm btn-default channel-remove"
                    type="button">
                    <span class="ic-delete"></span>
                </button>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </table>
    {% else %}
        <div class="alert alert-danger">
            <p> The project "{{ project }}" does not have any integrations
                set up yet.
            </p>
            <p>With no configured integrations, {{ site_name }}
                <strong>will not send any notifications</strong>
                when checks change state.
            </p>
        </div>
    {% endif %}


    {% if rw %}
    <h1 class="ai-title">Add More</h1>
    <ul class="add-integration">
        <li>
            <img src="{% static 'img/email.png' %}"
                class="icon" alt="Email icon" />

            <h2>Email</h2>
            <p>Get an email message when a check goes up or down.</p>
            <a href="{% url 'hc-add-email' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>

        {% if enable_webhooks %}
        <li>
            <img src="{% static 'img/webhook.png' %}"
                class="icon" alt="Webhook icon" />

            <h2>Webhook</h2>
            <p>Receive an HTTP callback when a check goes down.</p>
            <a href="{% url 'hc-add-webhook' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_apprise %}
        <li>
            <img src="{% static 'img/apprise.png' %}"
                 class="icon" alt="Apprise icon" />

            <h2>Apprise</h2>
            <p>Receive instant push notifications using Apprise; see <a href="https://github.com/caronc/apprise#popular-notification-services" >all of the supported services here</a>.</p>
            <a href="{% url 'hc-add-apprise' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_discord %}
        <li>
            <img src="{% static 'img/discord.png' %}"
                 class="icon" alt="Discord icon" />

            <h2>Discord</h2>
            <p>Cross-platform voice and text chat app designed for gamers.</p>
            <a href="{% url 'hc-add-discord' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_github %}
        <li>
            <img src="{% static 'img/github.png' %}" class="icon kind-github" alt="GitHub icon" />
            <h2>GitHub Issues</h2>
            <p> Create a GitHub issue when a check goes down.</p>
            <a href="{% url 'hc-add-github' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        <li>
            <img src="{% static 'img/googlechat.png' %}" class="icon" alt="Google Chat icon" />
            <h2>Google Chat</h2>
            <p>Google's communication tool for teams, successor of Hangouts.</p>
            <a href="{% url 'hc-add-googlechat' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>

        <li>
            <img src="{% static 'img/gotify.png' %}" class="icon" alt="Gotify icon" />
            <h2>Gotify</h2>
            <p> Self-hosted push notification service.</p>
            <a href="{% url 'hc-add-gotify' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>

        <li>
            <img src="{% static 'img/group.png' %}" class="icon" alt="Group icon" />
            <h2>Group</h2>
            <p> Deliver to multiple integrations at once.</p>
            <a href="{% url 'hc-add-group' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>

        {% if enable_matrix %}
        <li>
            <img src="{% static 'img/matrix.png' %}"
                 class="icon kind-matrix" alt="Matrix icon" />

            <h2>Matrix</h2>
            <p>Post notifications to a Matrix room.</p>
            <a href="{% url 'hc-add-matrix' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_mattermost %}
        <li>
            <img src="{% static 'img/mattermost.png' %}"
                class="icon kind-mattermost" alt="Mattermost icon" />

            <h2>Mattermost</h2>
            <p>High Trust Messaging for the Enterprise.</p>
            <a href="{% url 'hc-add-mattermost' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_msteams %}
        <li>
            <img src="{% static 'img/msteams.png' %}"
                class="icon" alt="Microsoft Teams" />

            <h2>Microsoft Teams</h2>
            <p>Chat and collaboration platform for Microsoft Office 365 customers.</p>
            <a href="{% url 'hc-add-msteams' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        <li>
            <img src="{% static 'img/ntfy.png' %}"
                class="icon kind-ntfy" alt="ntfy" />

            <h2>ntfy</h2>
            <p>Send push notifications to your phone or desktop via PUT/POST.</p>
            <a href="{% url 'hc-add-ntfy' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>

        {% if enable_opsgenie %}
        <li>
            <img src="{% static 'img/opsgenie.png' %}"
                class="icon" alt="Opsgenie icon" />

            <h2>Opsgenie</h2>
            <p> Alerting &amp; Incident Management Solution for Dev &amp; Ops.</p>
            <a href="{% url 'hc-add-opsgenie' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_pd %}
        <li>
            <img src="{% static 'img/pd.png' %}"
                class="icon" alt="PagerDuty icon" />

            <h2>PagerDuty</h2>
            <p>On-call scheduling, alerting, and incident tracking.</p>
            <a href="{% url 'hc-add-pd' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_pagertree %}
        <li>
            <img src="{% static 'img/pagertree.png' %}"
                class="icon" alt="PagerTree icon" />

            <h2>PagerTree</h2>
            <p>DevOps Incident Management - On-Call Schedules, Alerts, &amp; Notifications.</p>
            <a href="{% url 'hc-add-pagertree' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_call %}
        <li>
            <img src="{% static 'img/call.png' %}"
                class="icon" alt="Phone icon" />

            <h2>Phone Call</h2>
            <p>Get a phone call when a check goes down.</p>
            <a href="{% url 'hc-add-call' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_prometheus %}
        <li>
            <img src="{% static 'img/prometheus.png' %}"
                class="icon" alt="Prometheus icon" />

            <h2>Prometheus</h2>
            <p>Export check and tag status values to Prometheus.</p>
            <a href="{% url 'hc-add-prometheus' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_pushbullet %}
        <li>
            <img src="{% static 'img/pushbullet.png' %}"
                 class="icon" alt="Pushbullet icon" />

            <h2>Pushbullet</h2>
            <p>Pushbullet connects your devices, making them feel like one.</p>
            <a href="{% url 'hc-add-pushbullet' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_pushover %}
        <li>
            <img src="{% static 'img/po.png' %}"
                 class="icon" alt="Pushover icon" />

            <h2>Pushover</h2>
            <p>Receive instant push notifications on your phone or tablet.</p>
            <a href="{% url 'hc-add-pushover' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_rocketchat %}
        <li>
            <img src="{% static 'img/rocketchat.png' %}"
                class="icon" alt="Rocket.Chat icon" />

            <h2>Rocket.Chat</h2>
            <p>Open-source communications platform for organizations with high data protection standards.</p>
            <a href="{% url 'hc-add-rocketchat' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_shell %}
        <li>
            <img src="{% static 'img/shell.png' %}"
                class="icon" alt="Shell icon" />

            <h2>Shell Command</h2>
            <p>Execute a local shell command when a check goes up or down.</p>
            <a href="{% url 'hc-add-shell' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_signal %}
        <li>
            <img src="{% static 'img/signal.png' %}"
                class="icon" alt="Signal icon" />

            <h2>Signal</h2>
            <p>Get a Signal message when a check goes up or down.</p>
            <a href="{% url 'hc-add-signal' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_slack %}
        <li>
            <img src="{% static 'img/slack.png' %}"
                class="icon" alt="Slack icon" />

            <h2>Slack</h2>
            <p>A messaging app for teams.</p>
            {% if enable_slack_btn %}
            <a href="{% url 'hc-add-slack-btn' project.code %}" class="btn btn-primary">Add Integration</a>
            {% else %}
            <a href="{% url 'hc-add-slack' project.code %}" class="btn btn-primary">Add Integration</a>
            {% endif %}
        </li>
        {% endif %}

        {% if enable_sms %}
        <li>
            <img src="{% static 'img/sms.png' %}"
                class="icon" alt="SMS icon" />

            <h2>SMS</h2>
            <p>Get a text message to your phone when a check goes down.</p>
            <a href="{% url 'hc-add-sms' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_spike %}
        <li>
            <img src="{% static 'img/spike.png' %}" class="icon" alt="Spike.sh icon" />

            <h2>Spike.sh</h2>
            <p>Incident management with unlimited alerts and on-call schedules.</p>

                <a href="{% url 'hc-add-spike' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_telegram %}
        <li>
            <img src="{% static 'img/telegram.png' %}"
                 class="icon" alt="Telegram icon" />

            <h2>Telegram</h2>
            <p>A messaging app with a focus on speed and security.</p>
            <a href="{% url 'hc-add-telegram' %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_trello %}
        <li>
            <img src="{% static 'img/trello.png' %}"
                 class="icon" alt="Trello icon" />

            <h2>Trello</h2>
            <p>Create a Trello card when a check goes down.</p>
            <a href="{% url 'hc-add-trello' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_victorops %}
        <li>
            <img src="{% static 'img/victorops.png' %}"
                class="icon" alt="Splunk On-Call icon" />

            <h2>Splunk On-Call (VictorOps)</h2>
            <p>On-call scheduling, alerting, and incident tracking.</p>
            <a href="{% url 'hc-add-victorops' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_whatsapp %}
        <li>
            <img src="{% static 'img/whatsapp.png' %}"
                class="icon" alt="WhatsApp icon" />

            <h2>WhatsApp</h2>
            <p>Get a WhatsApp message when a check goes up or down.</p>
            <a href="{% url 'hc-add-whatsapp' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        {% if enable_zulip %}
        <li>
            <img src="{% static 'img/zulip.png' %}"
                class="icon" alt="Zulip icon" />

            <h2>Zulip</h2>
            <p>Open-source group chat.</p>
            <a href="{% url 'hc-add-zulip' project.code %}" class="btn btn-primary">Add Integration</a>
        </li>
        {% endif %}

        <li class="link-to-github">
            <img src="{% static 'img/missing.png' %}"
                 class="icon" alt="Suggest New Integration" />
            <p>
                Your favorite service or notification method not listed? <br />
                Please <a href="https://github.com/healthchecks/healthchecks/issues">file an issue on GitHub</a>!
            </p>
        </li>

    </ul>
    {% endif %}
</div>
</div>

<div id="checks-modal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

<div id="remove-channel-modal" class="modal">
    <div class="modal-dialog">
        <form id="remove-channel-form" method="post">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>
                        Remove this
                        <span class="remove-channel-kind">---</span>
                        Integration?
                    </h4>
                </div>
                <div class="modal-body">
                    <p>You are about to remove this
                        <span class="remove-channel-kind">---</span>
                    integration.
                    </p>
                    <p>Once it's gone it's gone. But, if you change your
                    mind later, you can create a similar channel again.
                    Do you want to continue?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Remove</button>
                </div>
            </div>
        </form>
    </div>
</div>

{% if rw  %}
{% for ch in channels %}
<div id="name-{{ ch.code }}" class="modal channel-modal">
    <div class="modal-dialog">
        <form
            action="{% url 'hc-channel-name' ch.code %}"
            class="form-horizontal"
            method="post">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>Integration Details</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            Name
                        </label>
                        <div class="col-sm-10">
                            <input
                                name="name"
                                type="text"
                                maxlength="100"
                                value="{{ ch.name }}"
                                placeholder="{{ ch }}"
                                class="input-name form-control" />

                            <span class="help-block">
                                Give this integration a human-friendly name,
                                so you can easily recognize it later.
                            </span>
                        </div>
                    </div>

                    {% if ch.kind == "webhook" %}
                    {% with ch.down_webhook_spec as spec %}
                        {% if spec.url %}
                            <p><strong>Execute on "down" events:</strong></p>
                            <pre>{{ spec.method }} {{ spec.url }}</pre>
                            {% if spec.body %}
                                <p>Request Body</p>
                                <pre>{{ spec.body }}</pre>
                            {% endif %}

                            {% if spec.headers %}
                                <p>Request Headers</p>
                                <pre>{{ spec.headers|format_headers }}</pre>
                            {% endif %}
                        {% endif %}
                        {% endwith %}

                        {% with ch.up_webhook_spec as spec %}
                        {% if spec.url %}
                            <p><strong>Execute on "up" events:</strong></p>
                            <pre>{{ spec.method }} {{ spec.url }}</pre>
                            {% if spec.body %}
                                <p>Request Body</p>
                                <pre>{{ spec.body }}</pre>
                            {% endif %}

                            {% if spec.headers %}
                                <p>Request Headers</p>
                                <pre>{{ spec.headers|format_headers }}</pre>
                            {% endif %}
                        {% endif %}
                    {% endwith %}
                    {% endif %}


                    {% if ch.kind == "shell" %}
                        {% if ch.shell.cmd_down %}
                            <p><strong>Execute on "down" events:</strong></p>
                            <pre>{{ ch.shell.cmd_down }}</pre>
                        {% endif %}

                        {% if ch.shell.cmd_up %}
                            <p><strong>Execute on "up" events:</strong></p>
                            <pre>{{ ch.shell.cmd_up }}</pre>
                        {% endif %}
                    {% endif %}
                </div>
                <div class="modal-footer">
                    {% if ch.kind == "webhook" %}
                    <a class="btn btn-default pull-left" href="{% url 'hc-edit-channel' ch.code %}">Edit Webhook Parameters&hellip;</a>
                    {% endif %}
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endfor %}
{% endif %}

{% endblock %}

{% block scripts %}
{% compress js %}
<script src="{% static 'js/channels.js' %}"></script>
{% endcompress %}
{% endblock %}