{% extends "layouts/default.html" %}

{% block title %} Access Control {% endblock title %}

{% block stylesheets %}
    <link rel="stylesheet" href="/static/assets/css/suggestags.css">
    <link rel="stylesheet" href="/static/assets/css/bootstrap-multiselect.min.css">
{% endblock stylesheets %}

{% block content %}

{% if current_user.is_authenticated %}
{{ form.hidden_tag() }}
<div class="page-inner">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col col-heading collapsed" href="#collapse_user_mgmt" title="Click to unfold"  data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapse_user_mgmt">
                            <span class="accicon float-left mr-3"><i class="fas fa-angle-right rotate-icon"></i></span>
                            <div class="card-title">Users</div>
                        </div>
                        <div class="col">
                            <button type="button" class="btn btn-sm btn-dark float-right ml-2" onclick="refresh_users(true);">Refresh</button>
                            <a class="btn btn-sm btn-dark float-right ml-2" href="access-control/audit/users?cid={{ session['current_case'].case_id }}">Audit users</a>
                            <button class="btn btn-sm btn-dark float-right ml-2" onclick="add_user();">Add user</button>
                        </div>
                    </div>
                </div>
                <div class="card-body collapse" id="collapse_user_mgmt">
                        <div class="table-responsive" id="users_table_wrapper">
                            <div class="selectgroup">
                                <span id="table_buttons"></span>
                            </div>
                            <table class="table display table table-striped table-hover" width="100%"
                                   cellspacing="0" id="users_table">
                                <thead>
                                <tr>

                                    <th>#ID</th>
                                    <th>Name</th>
                                    <th>Login Name</th>
                                    <th>Email</th>
                                    <th>Active</th>
                                    <th>Service Account</th>
                                </tr>
                                </thead>
                                <tfoot>
                                <tr>
                                    <th>#ID</th>
                                    <th>Name</th>
                                    <th>Login Name</th>
                                    <th>Email</th>
                                    <th>Active</th>
                                    <th>Service Account</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col col-heading collapsed" href="#collapse_groups_mgmt" title="Click to unfold"  data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapse_groups_mgmt">
                            <span class="accicon float-left mr-3"><i class="fas fa-angle-right rotate-icon"></i></span>
                            <div class="card-title">Groups</div>
                        </div>
                        <div class="col">
                            <button type="button" class="btn btn-sm btn-dark float-right ml-2" onclick="refresh_groups(true);">Refresh</button>
                            <button class="btn btn-sm btn-dark float-right" onclick="add_group();">Add group</button>
                        </div>
                    </div>
                </div>
                <div class="card-body collapse" id="collapse_groups_mgmt">
                    <div class="table-responsive" id="groups_table_wrapper">
                        <div class="selectgroup">
                            <span id="groups_table_buttons"></span>
                        </div>
                        <table class="table display table table-striped table-hover" width="100%"
                               cellspacing="0" id="groups_table">
                            <thead>
                            <tr>

                                <th>#ID</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Permissions</th>
                                <th>#Members</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th>#ID</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Permissions</th>
                                <th>#Members</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</div>
<div class="modal" tabindex="-1" role="dialog" id="modal_access_control" data-backdrop="true">
</div>
<div class="modal bg-shadow-gradient" tabindex="-1" role="dialog" id="modal_ac_additional" data-backdrop="true">
</div>
{% endblock content %}

{% block javascripts %}

    <script src="/static/assets/js/plugin/select/bootstrap-multiselect.min.js"></script>
    <script src="/static/assets/js/plugin/datatables/dataTables.select.min.js"></script>
    <script src="/static/assets/js/plugin/datatables/dataTables.contextualActions.min.js"></script>

    <script src="/static/assets/js/iris/manage.users.js"></script>
    <script src="/static/assets/js/iris/manage.cases.common.js"></script>
    <script src="/static/assets/js/iris/manage.groups.js"></script>

{% endblock javascripts %}