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

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


{% block content %}
<div class="row">
    <div class="col-sm-12">
        <h1>Group</h1>
        <p>Dispatch a notification to multiple integrations at once.</p>

        <h2>Integration Settings</h2>

        <form method="post" class="form-horizontal">
            {% csrf_token %}

            <div class="form-group {{ form.label.css_classes }}">
                <label for="id_label" class="col-sm-2 control-label">Label</label>
                <div class="col-sm-6">
                    <input
                        id="id_label"
                        type="text"
                        class="form-control"
                        name="label"
                        placeholder="VIP group"
                        value="{{ form.label.value|default:"" }}">

                    {% if form.label.errors %}
                    <div class="help-block">
                        {{ form.label.errors|join:"" }}
                    </div>
                    {% else %}
                    <span class="help-block">
                        Optional. If you add multiple groups,
                        the labels will help you tell them apart.
                    </span>
                    {% endif %}
                </div>
            </div>
            <div class="form-group {{ form.channels.css_classes }}">
                <label for="channels" class="col-sm-2 control-label">Integrations</label>
                <div id="channel-choices" class="col-sm-6">
                    {% for code, ch in form.channels.field.choices %}
                    <label class="checkbox-container">
                        <input
                            type="checkbox"
                            name="channels"
                            value="{{ code }}"
                            {% if code in form.channels.value %}checked{% endif %}>
                        <span class="checkmark"></span>

                        <img src="{% static ch.icon_path %}" alt="{{ ch.get_kind_display }}" class="kind-{{ ch.kind }}" />
                        <div class="name-desc">
                            {% if ch.name %}
                            {{ ch.name }}
                            {% else %}
                            <div class="unnamed">unnamed</div>
                            {% endif %}
                            <div class="channel-details-mini">
                            {% include "front/channel_description.html" with ch=ch %}
                            </div>
                        </div>
                    </label>
                    {% endfor %}
                    {% if form.channels.errors %}
                    <div class="help-block">
                        {{ form.channels.errors|join:"" }}
                    </div>
                    {% endif %}
                </div>
            </div>

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