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

{% block title %}Telegram Integration for {% 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>,
            {% site_name %} will send notifications to
            {% if chat_type == "private" %}
                a Telegram user
            {% else %}
                a Telegram chat
            {% endif %}
            named <strong>{{ chat_name }}</strong>.
        </p>
    </div>

    <h2>Integration Settings</h2>
    <form id="add-telegram" method="post" class="form-horizontal">
        {% csrf_token %}
        <div class="form-group">
            <label class="col-sm-3 control-label">Project</label>
            <div class="col-sm-8">
                <select name="project" class="selectpicker">
                    {% for project in projects %}
                    <option value="{{ project.code }}">{{ project }}</option>
                    {% endfor %}
                </select>
           </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-8">
                <button type="submit" class="btn btn-default">
                    <img class="ai-icon" src="{% static 'img/integrations/telegram.png' %}" alt="Telegram" />
                    Connect Telegram
                </button>
            </div>
        </div>
    </form>

    {% 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"></span>
            <p>
                From your Telegram client, invite
                <strong><a href="https://t.me/{{ bot_name }}">{{ bot_name }}</a></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"></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"></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>Select the project you want the Telegram integration added to,
            click on "Connect Telegram", 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 %}

{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/bootstrap-select.min.js' %}"></script>
{% endcompress %}
{% endblock %}