{% from 'include/input_macros.html' import input, select %}
{% for s in services %}
{% if s.0 == 'roxy-wi-checker' %}
    {% if s.3 != '* is not installed' and s.3 != '' %}
    <table id="checker_table" class="overview">
        <caption><h3>Add Telegram channel</h3></caption>
        <tr class="overviewHead" style="width: 50%;">
            <td class="padding10 first-collumn" style="width: 25%;">
                <span title="Token that has given @father_bot">Token</span>
            </td>
            <td style="width: 20%;">Channel name</td>
            {% if page != "servers.py" %}
            <td style="width: 25%;">Group</td>
            {% endif %}
            <td style="width: 100%;"></td>
            <td></td>
            <td></td>
        </tr>
        {% for telegram in telegrams %}
        <tr id="telegram-table-{{telegram.0}}" class="{{ loop.cycle('odd', 'even') }}">
            <td class="padding10 first-collumn">
                {% set id = 'telegram-token-' + telegram.0|string() %}
                {{ input(id, value=telegram.1, size='30') }}
            </td>
            <td>
                {% set id = 'telegram-chanel-' + telegram.0|string() %}
                {{ input(id, value=telegram.2, size='30') }}
            </td>
            {% if page != "servers.py" %}
            <td>
                <select id="telegramgroup-{{telegram.0}}" name="telegramgroup-{{telegram.0}}">
                    <option disabled selected>Choose group</option>
                    {% for group in groups %}
                    {% if telegram.3|string() == group.0|string() %}
                    <option value="{{ group.0 }}" selected>{{ group.1 }}</option>
                    {% else %}
                    <option value="{{ group.0 }}">{{ group.1 }}</option>
                    {% endif %}
                    {% endfor %}
                </select>
            </td>
            {% endif %}
            <td>
                <button title="Send test message" onclick="checkTelegram({{telegram.0}})">Test</button>
            </td>
            <td>
                <a class="add" onclick="cloneTelegram({{telegram.0}})" id="clone-{{telegram.0}}" title="Clone {{telegram.2}}" style="cursor: pointer;"></a>
            </td>
            <td>
                <a class="delete" onclick="confirmDeleteTelegram({{telegram.0}})" title="Delete channel {{telegram.2}}" style="cursor: pointer;"></a>
            </td>
        </tr>
        {% endfor %}
    </table>
    <br /><span class="add-button" title="Add telegram channel" id="add-telegram-button">+ Add</span>
    <br /><br />
    <table id="checker_slack_table" class="overview">
        <caption><h3>Add Slack channel</h3></caption>
        <tr class="overviewHead" style="width: 50%;">
            <td class="padding10 first-collumn" style="width: 25%;">
                <span title="Token that has given with APP registration">Token</span>
            </td>
            <td style="width: 20%;">Channel name</td>
            {% if page != "servers.py" %}
            <td style="width: 25%;">Group</td>
            {% endif %}
            <td style="width: 100%;"></td>
            <td></td>
            <td></td>
        </tr>
        {% for slack in slacks %}
        <tr id="slack-table-{{slack.0}}" class="{{ loop.cycle('odd', 'even') }}">
            <td class="padding10 first-collumn">
                {% set id = 'slack-token-' + slack.0|string() %}
                {{ input(id, value=slack.1, size='30') }}
            </td>
            <td>
                {% set id = 'slack-chanel-' + slack.0|string() %}
                {{ input(id, value=slack.2, size='30') }}
            </td>
            {% if page != "servers.py" %}
            <td>
                <select id="slackgroup-{{slack.0}}" name="slackgroup-{{slack.0}}">
                    <option disabled selected>Choose group</option>
                    {% for group in groups %}
                    {% if slack.3|string() == group.0|string() %}
                    <option value="{{ group.0 }}" selected>{{ group.1 }}</option>
                    {% else %}
                    <option value="{{ group.0 }}">{{ group.1 }}</option>
                    {% endif %}
                    {% endfor %}
                </select>
            </td>
            {% endif %}
            <td>
                <button title="Send test message" onclick="checkSlack({{slack.0}})">Test</button>
            </td>
            <td>
                <a class="add" onclick="cloneSlack({{slack.0}})" id="clone-{{slack.0}}" title="Clone {{slack.2}}" style="cursor: pointer;"></a>
            </td>
            <td>
                <a class="delete" onclick="confirmDeleteSlack({{slack.0}})" title="Delete channel {{slack.2}}" style="cursor: pointer;"></a>
            </td>
        </tr>
        {% endfor %}
    </table>
    <br /><span class="add-button" title="Add Slack channel" id="add-slack-button">+ Add</span>
    <br /><br />
    <div id="ajax-telegram"></div>
    <div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
        You can read the description of all parameters <a href="https://haproxy-wi.org/description.py?description=checker" title="Servers description" target="_blank">here</a>,
        How to create and use Telegram bot in this <a href="https://haproxy-wi.org/howto.py?howto=checker" title="How to create Telegram bot and use it with Roxy-WI" target="_blank">article</a>,
        How to create and use Slack APP in this <a href="https://haproxy-wi.org/howto.py?howto=slack" title="How to create Slack APP and use it with Roxy-WI" target="_blank">article</a>
    </div>
    {% else %}
        <div style="text-align: center;">
            <br />
            <h3>You do not have installed Backends checker
            Read <a href="https://haproxy-wi.org/services.py?service=checker#installation" title="Checker installation" style="color: #5d9ceb;" target="_blank">hear</a>
            how to install Checker service</h3>
        </div>
    {% endif %}
{% endif %}
{% endfor %}