{% extends "base.html.twig" %}

{% block title %}How to setup notifications{% endblock %}

{% block body %}

    <style>
        li {
            padding-bottom: 10px;
            padding-left: 5px;
        }
    </style>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="bgc-white bd bdrs-3 p-20 mB-20">
                    <h4 class="c-grey-900"><i class="c-yellow-500 fas fa-question-circle"></i> How to setup notifications</h4>
                    <hr>
                    <h5 style="margin-top: 30px;">How to connect DWARFG_LONG notifier to the Slack</h5>
                    <hr>
                    <p class="text-justify">
                        We need to register custom application to connect DWARFG_LONG notifier. Here is how to do it:
                    </p>
                    <ol>
                        <li>Open this link <a href="https://api.slack.com/apps">Slack API: Applications</a></li>
                        <li>You need to sign in to your Slack account.</li>
                        <li>Create new application by clicking on button "Create New App".</li>
                        <img style="margin: 20px;" src="{{ asset('assets/images/help/slack-create-new-app.png') }}" height="53" width="600">
                        <li>Create the Slack application, for example „DWARFG_LONGNotifier“ and assign it to a workspace. In the first step select From Scratch.</li>
                        <img style="margin: 20px;" src="{{ asset('assets/images/help/create-slack-app-from-scratch.png') }}" height="319" width="448">
                        <img style="margin: 20px;" src="{{ asset('assets/images/help/create-slack-app.png') }}" height="416" width="448">
                        <li>Setup permissions.</li>
                        <img style="margin: 20px;" src="{{ asset('assets/images/help/set-app-permissions.png') }}" height="438" width="400">
                        <img style="margin: 20px;" src="{{ asset('assets/images/help/setup-bot-token-scopes.png') }}" height="198" width="400">
                        <li>Add Bot Scopes: „chat:write.public”.</li>
                        <img style="margin: 20px;" src="{{ asset('assets/images/help/bot-token-scopes-chat-write.png') }}" height="251" width="420">
                        <li>Install Workspace.</li>
                        <img style="margin: 20px;" src="{{ asset('assets/images/help/install-workspace.png') }}" height="131" width="421">
                        <img style="margin: 20px;" src="{{ asset('assets/images/help/notifier-requesting-permission.png') }}" height="282" width="442">
                        <li>Copy Oauth Token to the <a href="{{ path('admin_settings') }}">DWARFG_LONG settings</a> and select the Slack channel.</li>
                        <img style="margin: 20px;" src="{{ asset('assets/images/help/oauth-token.png') }}" height="178" width="408">

                    </ol>

                </div>
            </div>
        </div>
    </div>

{% endblock body %}