{% extends "index_page.html" %}
{% block title %}Group Manager{% endblock %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTablesExtensions/buttonStyles/css/buttons.dataTables.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
{% endblock %}
{% block content %}
<!-- Start of body -->
    <div class="container">
        <div class="page-header">
            <h1>Manage Groups</h1>
            {% if admin_groups|length != 0 or member_groups|length != 0 %}
            <div style="display: inline;">
                <a href="{{ url_for('group_management.view_create_group_page') }}" target="_blank">
                    <button type="button" class="btn btn-primary">
                        Create Group
                    </button>
                </a>
                <button type="button" id="remove_groups" class="btn btn-primary"
                        data-url="{{ url_for('group_management.delete_groups') }}">
                    Remove Selected Groups
                </button>
            </div>
            {% endif %}
        </div>
        <form id="groups_form" action="/groups/manage" method="POST">
            <input type="hidden" name="selected_group_ids" value="">
            <div style="min-width: 800px; max-width: 1000px;">
                {% if admin_groups|length == 0 and member_groups|length == 0 %}
                <h4>You currently aren't a member or admin of any groups.</h4>
                <br>
                <a href="{{ url_for('group_management.view_create_group_page') }}" target="_blank">
                    <button type="button" class="btn btn-primary">
                        Create Group
                    </button>
                </a>
                {% else %}
                <div style="margin-top: 20px;"><h2>Admin Groups</h2></div>
                <hr>
                {% if admin_groups|length == 0 %}
                <h4>You currently aren't the administrator of any groups.</h4>
                {% else %}
                <table id="admin_groups" class="table-hover table-striped cell-border" style="float: left;">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Index</th>
                            <th>Name</th>
                            <th># Members</th>
                            <th>Created</th>
                            <th>Last Changed</th>
                            <th>Group ID</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for group in admin_groups %}
                        <tr>
                            <td><input type="checkbox" name="group_id" value="{{ group.id }}"></td>
                            <td align="right">{{ loop.index }}</td>
                            {% set group_url = url_for('group_management.view_group', group_id=group.uuid) %}
                            <td><a href="{{ group_url  }}">{{ group.name }}</a></td>
                            <td align="right">{{ group.admins|length + group.members|length }}</td>
                            <td>{{ group.created_timestamp }}</td>
                            <td>{{ group.changed_timestamp }}</td>
                            <td>{{ group.uuid }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% endif %}
            </div>
            <hr>
            <div style="min-width: 800px; max-width: 1000px;">
                <div><h2>User Groups</h2></div>
                <hr>
                {% if member_groups|length == 0 %}
                <h4>You currently aren't a member of any groups.</h4>
                {% else %}
                <table id="member_groups" class="table-hover table-striped cell-border" style="float: left;">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Index</th>
                            <th>Name</th>
                            <th># Members</th>
                            <th>Created</th>
                            <th>Last Changed</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for group in member_groups %}
                        <tr>
                            <td><input type="checkbox" name="read" value="{{ group.id }}"></td>
                            <td>{{ loop.index }}</td>
                            {% set group_url = url_for('group_management.view_group', group_id=group.uuid) %}
                            <td><a href="{{ group_url }}">{{ group.name }}</a></td>
                            <td>{{ group.admins|length + group.members|length }}</td>
                            <td>{{ group.created_timestamp }}</td>
                            <td>{{ group.changed_timestamp }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% endif %}
                {% endif %}
            </div>
        </form>
    </div>

<!-- End of body -->

{% endblock %}

{% block js %}
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready( function () {
            {% if admin_groups|length != 0 %}
            $('#admin_groups').dataTable({
                'sDom': 'tr'
            });
            {% endif %}
            {% if member_groups|length != 0 %}
            $('#member_groups').dataTable({
                'sDom': 'tr'
            });
            {% endif %}
            submit_special = function(url) {
                $("#groups_form").attr("action", url);
                return $("#groups_form").submit();
            };

            $("#remove_groups").on("click", function() {
                url = $(this).data("url")
                groups = []
                $("input[name=group_id]:checked").each(function() {
                    groups.push($(this).val());
                });
                groups_string = groups.join(":")
                $("input[name=selected_group_ids]").val(groups_string)
                return submit_special(url)
            });
        });
    </script>
{% endblock %}