{% extends "base.html" %}
{% load compress humanize staticfiles hc_extras %}

{% block title %}Notification Channels - {% site_name %}{% endblock %}


{% block content %}
<div class="row">
<div class="col-sm-12">
    <h1>Telegram</h1>

    {% if chat_id %}
    <div class="jumbotron">
        <p>
            When a check goes <strong>up</strong> or <strong>down</strong>,
            healthchecks.io will send notifications to
            {% if chat_type == "private" %}
                a Telegram user
            {% else %}
                a Telegram chat
            {% endif %}
            named <strong>{{ chat_name }}</strong>. Sound good?
        </p>

        <form method="post" class="text-center">
            {% csrf_token %}

            <button type="submit" class="btn btn-default">
                <img class="ai-icon" src="{% static 'img/integrations/telegram.png' %}" alt="Discord" />
                Yes, connect Telegram
            </button>
        </form>
    </div>
    {% else %}
    <p>If your team uses <a href="https://telegram.org/">Telegram</a>,
    you can set up {% site_name %} to post status updates directly to an
    appropriate Telegram chat or user.</p>

    <h2>Setup Guide</h2>
    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no">1</span>
            <p>
                From your Telegram client, invite
                <strong>{{ bot_name }}</strong> to a group. It will get added
                as a member with no access to group messages.
            </p>
            <p>
                Alternatively, if you want notifications sent to yourself
                directly, start a conversation with
                <strong>{{ bot_name }}</strong>.
            </p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/integrations/setup_telegram_1.png' %}">
        </div>
    </div>
    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no">2</span>
            <p>Type <strong><code>/start</code></strong> command.
               If there are multiple bots in the group, type
               <strong><code>/start@{{ bot_name }}</code></strong> instead.
           </p>
            <p>The bot will respond with a confirmation link.</p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/integrations/setup_telegram_2.png' %}">
        </div>    </div>

    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no">3</span>
            <p>Click or tap on the confirmation link, and
            {% site_name %} will open in a browser window asking you to
             confirm the new integration.</p>
            <p>Confirm the integration, and it's done!</p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/integrations/setup_telegram_3.png' %}">
        </div>
    </div>
    {% endif %}
</div>
</div>
{% endblock %}