{% extends "base.html" %}

{% block content %}
<section class='{{ page.header[0].css_class }}'>
<h2><i class="fa fa-magic"></i> Create Group</h2>
</section>

<section class='{{ page.create_group_form[0].css_class }}'>
    <form method="POST" action="{{ url_for('create_group') }}">

        <div class="control-group {% if form.groupname.errors %}error{% endif %}">
            <div class="controls input-prepend">
                <span class="add-on"><i class="fa fa-circle"></i></span>
                {{ form.groupname(placeholder="Group name")}}
            </div>

            {% if form.groupname.errors %}
            <ul class="errors">
                {% for error in form.groupname.errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>

        <div class="control-group {% if form.description.errors %}error{% endif %}">
            <div class="fullsize-input">
                {{ form.description(placeholder="Description") }}
            </div>
            {% if form.description.errors %}
            <ul class="errors">
                {% for error in form.description.errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>

        <div class="control-group {% if form.author.errors %}error{% endif %}">
            {{ form.csrf_token }}
            {{ form.author }}

            <div class="btn-group">
                <button type="submit" class="btn">
                    <i class="fa fa-group"></i>
                    Create group
                </button>

                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span> as {{active_persona.username}}
                </button>
                <ul class="dropdown-menu">
                    {% for p in controlled_personas %}
                    <li><a href="#"><i class="fa fa-user"></i> {{p.username}}</a></li>
                    {% endfor %}
                </ul>
                <!-- <span class="privacy-selector">
                    <ul>
                        <li>Only important</li>
                        <li>All contacts</li>
                        <li>public</li>
                    </ul>
                </span> -->
            </div>
        </div>
    </form>
</section>
{% endblock %}
