{% extends theme('base.html') %}
{% import 'macro/fomanticui.html' as sui %}
{% import "macro/table.html" as table %}

{% block title %}
    {% if not edited_group %}
        {% trans %}Group creation{% endtrans %}
    {% else %}
        {% trans %}Group edition{% endtrans %}
    {% endif %}
{% endblock %}

{% block script %}
    <script src="/static/js/confirm.js"></script>
    <script src="/static/js/users.js"></script>
{% endblock %}

{% block submenu %}
    <nav class="ui bottom attached two item borderless menu">
        <a class="{% if edited_group %}active {% endif %}item" href="{{ url_for('groups.groups') }}">
            <i class="th list icon"></i>
            {% trans %}View{% endtrans %}
        </a>
        <a class="{% if not edited_group %}active {% endif %}item"  href="{{ url_for('groups.create_group') }}">
            <i class="plus icon"></i>
            {% trans %}Add{% endtrans %}
        </a>
    </nav>
{% 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.display_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 top attached segment">
            <h2 class="ui center aligned header">
                <div class="content">
                    {% trans %}Group members{% endtrans %}
                </div>
            </h2>

            {{ table.search(table_form, "table.users") }}
        </div>
        {% include "partial/users.html" %}
    {% endif %}

{% endblock %}