{% extends "base.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 can integrate it
        with your {{ site_name }} account in 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>Settings</strong>.
            </p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/integrations/setup_zulip_1.png' %}">
        </div>
    </div>
    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no"></span>
            <p>
                Got to <strong>Your 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 own preferred values
                for 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>Create Bot</strong>.
            </p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/integrations/setup_zulip_2.png' %}">
        </div>
    </div>

    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no"></span>
            <p>
                Download the bot's <code>zuliprc</code> file by clicking on the
                <strong>cyan download icon</strong>, and upload it in the form below.
                Also specify the stream or the private user you want {{ site_name }}
                to post notifications to.
            </p>
            <p>
                Save the integration and you are done!
            </p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/integrations/setup_zulip_3.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>
                    Stream
                </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 %}
                Stream Name
            {% 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 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/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/add_zulip.js' %}"></script>
{% endcompress %}
{% endblock %}