{% extends theme('base.html') %}
{% import 'fomanticui.html' as sui %}
{% import 'userlist.html' as user_list %}

{% block style %}
    <link href="/static/datatables/jquery.dataTables.min.css" rel="stylesheet">
    <link href="/static/datatables/dataTables.semanticui.min.css" rel="stylesheet">
{% endblock %}

{% block script %}
    <script src="/static/datatables/jquery.dataTables.min.js"></script>
    <script src="/static/datatables/dataTables.semanticui.min.js"></script>
    <script src="/static/js/confirm.js"></script>
    <script src="/static/js/users.js"></script>
{% endblock %}

{% block content %}
    {% if edited_group %}
        <div class="ui basic modal" id="modal-delete">
            <div class="ui icon header">
                <i class="trash alternate icon"></i>
                {% trans %}Group deletion{% endtrans %}
            </div>
            <div class="content">
                <p>
                    {% trans %}Are you sure you want to delete this group? This action is unrevokable and all the data about this group will be removed.{% endtrans %}
                </p>
            </div>
            <div class="actions">
                <div class="ui inverted cancel button">{% trans %}Cancel{% endtrans %}</div>
                <div class="ui inverted red approve button">{% trans %}Delete{% endtrans %}</div>
            </div>
        </div>
    {% endif %}

    <div class="ui clearing segment">
        <h2 class="ui center aligned header">
            <div class="content">
                {% if not edited_group %}
                    {% trans %}Group creation{% endtrans %}
                {% else %}
                    {% trans %}Group edition{% endtrans %}
                {% endif %}
            </div>

            <div class="sub header">
                {% if not edited_group %}
                    {% trans %}Create a new group{% endtrans %}
                {% else %}
                    {% trans %}Edit information about a group{% endtrans %}
                {% endif %}
            </div>
        </h2>

        <form method="POST"
            id="{{ form.__class__.__name__|lower }}"
            action="{{ request.url }}"
            role="form"
            class="ui form"
        >
            {{ form.hidden_tag() if form.hidden_tag }}
            {{ sui.render_field(form.name) }}
            {{ sui.render_field(form.description) }}

            {% if not edited_group %}
                <div class="ui info visible message">
                    {% trans %}Because group cannot be empty, you will be added to the group. You can remove you later by editing your profile when you will have added other members to the group.{% endtrans %}
                </div>
            {% endif %}

            <div class="ui right aligned container">
                <div class="ui stackable buttons">
                    {% if edited_group %}
                        <button type="submit" class="ui right floated basic negative button confirm" name="action" value="delete" id="delete">
                            {% trans %}Delete group{% endtrans %}
                        </button>
                    {% endif %}
                    <button type="submit" class="ui right floated primary button" name="action" value="edit">
                        {% if not edited_group %}
                            {% trans %}Create group{% endtrans %}
                        {% else %}
                            {% trans %}Submit{% endtrans %}
                        {% endif %}
                    </button>
                </div>
            </div>
        </form>
    </div>

    {% if edited_group %}
        <div class="ui segment">
            <h2 class="ui center aligned header">
                <div class="content">
                    {% trans %}Group members{% endtrans %}
                </div>
            </h2>

            {{ user_list.user_list(user, members) }}
        </div>
    {% endif %}

{% endblock %}