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

{% block title %}Zulip Integration for {{ site_name }}{% endblock %}


{% block content %}
<div class="row">
<div class="col-sm-12">
    <h1>Zulip</h1>
    <p>
        <a href="https://zulipchat.com/">Zulip</a> is an open-source group chat app
        with an email threading model. If you use or plan on using Zulip,
        you can integrate it with your {{ site_name }} account in a few simple steps.
    </p>

    <h2>Setup Guide</h2>
    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no"></span>
            <p>
                Log into your Zulip account,
                click on the <strong>gear icon</strong> in the upper right corner,
                and select <strong>Personal settings</strong>.
            </p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/setup_zulip_1.png' %}">
        </div>
    </div>
    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no"></span>
            <p>
                Go to <strong>Bots › Add a new bot </strong> and fill
                out the fields.
            </p>
            <p>
                For <strong>Bot type</strong>,
                select "Incoming webhook". You can choose your preferred values
                for the bot's name and email.
            </p>
            <p>
                For the profile picture, feel free to use the {{ site_name }} logo:
            </p>
            <p>
                <img src="{% static 'img/logo.png'%}" alt="{{ site_name }} logo">
            </p>
            <p>
                After you have filled out the values,
                click on <strong>Add</strong>.
            </p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/setup_zulip_2.png' %}">
        </div>
    </div>

    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no"></span>
            <p>
                After adding the bot, click on the <strong>Manage bot</strong> icon.
            </p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/setup_zulip_3.png' %}">
        </div>
    </div>

    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no"></span>
            <p>
                In the dialog window that opens, scroll to the bottom and download the
                bot's <code>zuliprc</code> file by clicking on the
                <strong>purple download icon</strong>.
            </p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/setup_zulip_4.png' %}">
        </div>
    </div>

    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no"></span>
            <p>
                If you want to deliver notifications to an individual Zulip user,
                look up their email address in their Zulip user profile.
            </p>
            <p>
                If the user profile does not display their email address, this may be
                due to their privacy settings. In this case, look up and use their
                <strong>User ID</strong> instead.
            </p>
            <p>
                Fill in the form below, save the integration and you are done!
            </p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/setup_zulip_5.png' %}">
        </div>
    </div>

    <h2>Integration Settings</h2>

    <form method="post" class="form-horizontal">
        {% csrf_token %}
        <input type="hidden" name="api_key" id="zulip-api-key">
        <input type="hidden" name="bot_email" id="zulip-bot-email">
        <input type="hidden" name="site" id="zulip-site">

        <div class="form-group">
            <label for="zuliprc" class="col-sm-2 control-label">The zuliprc File</label>
            <div class="col-sm-4">
                <input id="zuliprc" type="file">
                <div id="zuliprc-help" class="help-block">
                {% if form.api_key.errors or form.bot_email.errors or form.site.errors %}
                    Invalid file format.
                {% endif %}
                </div>
            </div>
        </div>

        <div id="z-mtype-group" class="form-group {{ form.mtype.css_classes }}">
            <label class="col-sm-2 control-label">Post To</label>
            <div class="col-sm-4">
                <label class="radio-container">
                    <input
                        type="radio"
                        name="mtype"
                        value="stream"
                        {% if form.mtype.value != "private" %} checked {% endif %}>
                    <span class="radiomark"></span>
                    Channel
                </label>
                <label class="radio-container">
                    <input
                        type="radio"
                        name="mtype"
                        value="private"
                        {% if form.mtype.value == "private" %} checked {% endif %}>
                    <span class="radiomark"></span>
                    Private user
                </label>
            </div>
        </div>

        <div class="form-group {{ form.to.css_classes }}">
            <label id="z-to-label" for="z-to" class="col-sm-2 control-label">
            {% if form.mtype.value == "private" %}
                User's Email
            {% else %}
                Channel
            {% endif %}
            </label>
            <div class="col-sm-4">
                <input
                    id="z-to"
                    type="text"
                    class="form-control"
                    name="to"
                    value="{{ form.to.value|default:"" }}">

                <div id="z-to-help" class="help-block">
                {% if form.to.errors %}
                    {{ form.to.errors|join:"" }}
                {% else %}
                    Example: "{% if form.mtype.value == "private" %}alice@example.org{% else %}general{% endif%}"
                {% endif %}
                </div>
            </div>
        </div>

        <div id="z-topic-group" class="form-group {% if form.mtype.value == 'private' %}hide{% endif %} {{ form.topic.css_classes }}">
            <label for="z-topic" class="col-sm-2 control-label">Topic</label>
            <div class="col-sm-4">
                <input
                    id="z-topic"
                    type="text"
                    class="form-control"
                    name="topic"
                    value="{{ form.topic.value|default:"" }}">
                <div class="help-block">
                    Example: "Alerts". Leave empty to use auto-generated topics in the form:
                    "{check name} is {status}".
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button
                    id="save-integration"
                    type="submit"
                    disabled
                    class="btn btn-primary">Save Integration</button>
            </div>
        </div>
    </form>
</div>
</div>
{% endblock %}

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