{% extends "panel_base.html" %}

{% block header_title %}{% if group %}{{gettext("Edit Group Information")}}{% else %}{{gettext("Create Group")}}{% endif %}
| {{get_sitename()}}{% endblock %}
{% block title %}{% if group %}{{gettext("Edit Group Information")}}{% else %}{{gettext("Create Group")}}{% endif %}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-7 col-md-9 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>{% if group %}{{gettext("Edit Group Information")}}{% else %}{{gettext("Create Group")}}{% endif %}
                </h2>
                <ul class="nav navbar-left panel_toolbox">
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <form method="POST" enctype="multipart/form-data">
                    <div class="col-xs-12">
                        <div class="form-group col-xs-12">
                            <label for="sku">{{gettext("Name")}}</label>
                            <input placeholder="{{gettext('Name')}}" type="text" id="name" name="name"
                                required="required" class="form-control col-xs-12" {% if group %}value="{{group.name}}"
                                {% endif %}>
                        </div>
                        <div class="form-group">
                            <label for="group" class="control-label">
                                {{gettext("Permissions")}}
                            </label>
                            <select id="permissions" name="permissions" class="form-control" multiple="multiple">
                                <option value="">---</option>
                                {% for p in permissions %}
                                <option value="{{p.id}}"
                                    {% if group and p.id in group_permission_ids %}selected="selected" {% endif %}>
                                    {{p.name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-12">
                                <button class="btn btn-success" type="submit">{{gettext("Save")}}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js_block %}
<script>
    $(function () {
        $('#permissions').select2({
            multiselect: true,
        });
    });
</script>
{% endblock %}