{% extends "base.twig" %}

{% block resources %}
<link href="css/roles.css" rel="stylesheet">
{% endblock %}

{% block modal %}
<div class="modal fade" id="delete-role-modal" aria-labelledby="delete-role-modal-label">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="delete-role-modal-label">Confirm Deletion</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete the <span id="delete-modal-role-name"></span> Role?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="delete-role-btn">Delete</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<div id="modal" class="modal fade" role="dialog" aria-labelledby="role-modal-label">
    <div class="modal-dialog custom-wide">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="role-modal-label"></h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="role-form" role="form" data-toggle="validator">
                    <div class="form-group has-feedback">
                        <div id="container-role-name">
                            <label id="label-role-name" class="col-sm-3 control-label" for="role-name">Role Name</label>
                            <input type="text" class="form-control" name="role-name" id="role-name"
                                placeholder="Role Name" maxlength="63"
                                data-pattern-error="This field must start with a letter and cannot contain special characters (except spaces). The role name must be at least 4 characters long, not counting trailing spaces."
                                pattern="^(?=(?:[^a-zA-Z0-9]*[a-zA-Z0-9 ]){4})[a-zA-Z][a-zA-Z0-9 ]*[a-zA-Z0-9]$"
                                required>
                        </div>
                        <div class="help-block with-errors"></div>
                    </div>
                    <table id="table-permissions" class="table table-striped table-bordered">
                        <thead>
                            <th>Permissions</th>
                            <th>All</th>
                            <th>Read</th>
                            <th>Write</th>
                        </thead>
                        <tbody id="permissions">
                            <tr>
                                <td>Dashboard Login</td>
                                <td colspan="3"><input id="login-checkbox" type="checkbox"></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="card shadow mb-4">
                        <div id="header-data-permissions" class="card-header py-2">
                            <div><i class="fas fa-key fa-fw">&nbsp;</i><span>Data Permissions</span></div>
                        </div>
                        <div class="card-body">
                            <div class="line no-bottom-margin">
                                <div class="page-size-container" id="dpdictionarys-page-size-container">
                                    <div class="label">Show</div>
                                    <select id="dpdictionarys-page-size" aria-controls="dictionary-data-table"
                                        class="custom-select custom-select-sm form-control form-control-sm">
                                        <option value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select>
                                    <div class="label">entries</div>
                                </div>
                                <div class="search-container" id="dpdictionarys-search-container">
                                    <div class="label">Search:</div>
                                    <input id="dpdictionarys-search" type="search" class="form-control form-control-sm">
                                </div>
                            </div>
                        </div>
                        <table id="table-data-permissions" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th class="th-dpdictionary-id" rowspan="2">Dictionary ID</th>
                                    <th rowspan="2">Label</th>
                                    <th rowspan="2">Name</th>
                                    <th rowspan="2">Use Default</th>
                                    <th rowspan="2">All</th>
                                    <th rowspan="2">Read</th>
                                    <th rowspan="2">Write</th>
                                    <th rowspan="1" colspan="2">Delete</th>
                                </tr>
                                <tr>
                                    <th>Dashboard</th>
                                    <th>API</th>
                                </tr>
                            </thead>
                            <tbody id="dpdictionarys"></tbody>
                        </table>
                        <div id="row-pagination-data-permissions" class="line">
                            <div id="dpdictionarys-pagination-info">
                                Showing <span id="dpdictionarys-page-start"></span> to <span
                                    id="dpdictionarys-page-end"></span> of <span
                                    id="dpdictionarys-page-num-of-entries"></span> entries<span
                                    id="dpdictionarys-page-info-filtered-text">
                                    (filtered from <span id="dpdictionarys-page-info-filtered-text-num"></span> total
                                    entries)</span>
                            </div>
                            <div class="pagination-next-prev">
                                <div id="dpdictionarys-page-prev" class="page-item previous disabled">
                                    <div class="page-link">Previous</div>
                                </div>
                                <div class="pages-container" id="dpdictionarys-pages-container"></div>
                                <div id="dpdictionarys-page-next" class="page-item next">
                                    <div class="page-link">Next</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer modal-footer-spacing-and-alignment">
                        <button type="submit" class="btn btn-primary" id="role-yes-button"></button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modal-spinner" class="spinner"></div>
{% endblock %}

{% block helps %}
<li class="nav-item mx-1">
    <a href="https://www.csprousers.org/help/CSWeb/adding_roles.html" target="_blank" class="nav-text-cspro"><i
            class="far fa-question-circle"></i> Help</a>
</li>
{% endblock %}

{% block content %}
{% set canManageRoles = is_granted('ROLE_REPORTS') or is_granted('ROLE_REPORTS.WRITE') %}
<div class="row">
    <div class="col-12">
        <div id="alert" class="alert-placeholder-cspro alert-margin-cspro"></div>
    </div>
</div>
    <div class="row" id="roles-content" data-can-manage-roles="{{ canManageRoles ? 'true' : 'false' }}">
    <div class="col-12">
        <div class="card shadow mb-4">
            <div class="card-header py-2">
                <div><i class="fas fa-user fa-fw">&nbsp;</i><span>Roles</span></div>
                <div class="btn-toolbar">
                    <button type="button" class="btn btn-primary btn-sm" id="add-role-btn" {% if not canManageRoles %}disabled{% endif %}>Add Role</button>
                </div>
            </div>
            <div class="card-body">
                <div class="line">
                    <div class="page-size-container" id="roles-page-size-container">
                        <div class="label">Show</div>
                        <select id="roles-page-size" aria-controls="dictionary-data-table"
                            class="custom-select custom-select-sm form-control form-control-sm">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        <div class="label">entries</div>
                    </div>
                    <div class="search-container" id="roles-search-container">
                        <div class="label">Search:</div>
                        <input id="roles-search" type="search" class="form-control form-control-sm">
                    </div>
                </div>
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th class="th-role-id">Role ID</th>
                            <th>Role Name</th>
                            <th>Apps</th>
                            <th>Dashboard Login</th>
                            <th>Dictionary</th>
                            <th>Files</th>
                            <th>Reports</th>
                            <th>Roles</th>
                            <th>Users</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="roles"></tbody>
                </table>
                <div class="line no-margin-bottom">
                    <div id="roles-pagination-info">
                        Showing <span id="roles-page-start"></span> to <span id="roles-page-end"></span> of <span
                            id="roles-page-num-of-entries"></span> entries<span id="roles-page-info-filtered-text">
                            (filtered from <span id="roles-page-info-filtered-text-num"></span> total entries)</span>
                    </div>
                    <div class="pagination-next-prev">
                        <div id="roles-page-prev" class="page-item previous disabled">
                            <div class="page-link">Previous</div>
                        </div>
                        <div class="pages-container" id="roles-pages-container"></div>
                        <div id="roles-page-next" class="page-item next">
                            <div class="page-link">Next</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="templates">
    <table>
        <tr class="role">
            <td class="id"></td>
            <td class="name"></td>

            <td class="data"></td>
            <td class="apps"></td>
            <td class="login"></td>
            <td class="dictionary"></td>
            <td class="files"></td>
            <td class="reports"></td>
            <td class="roles"></td>
            <td class="users"></td>

            <td class="actions">
                <i class="edit icon-action icon-disabled fas fa-pencil-alt" title="Edit"></i>
                <i class="copy icon-action fas fa-copy" title="Copy to New Role"></i>
                <i class="delete icon-action icon-disabled fas fa-trash" title="Delete"></i>
            </td>
        </tr>
        <tr class="permission">
            <td class="name"></td>
            <td class="all"><input class="checkbox all-checkbox" type="checkbox"></td>
            <td class="read"><input class="checkbox permission-checkbox" type="checkbox"></td>
            <td class="write"><input class="checkbox permission-checkbox" type="checkbox"></td>
        </tr>
        <tr class="dpdictionary">
            <td class="id"></td>
            <td class="label"></td>
            <td class="name"></td>
            <td class="default"><input class="checkbox default-checkbox" type="checkbox"></td>
            <td class="all"><input class="checkbox all-checkbox" type="checkbox"></td>
            <td class="read"><input class="checkbox permission-checkbox" type="checkbox"></td>
            <td class="write"><input class="checkbox permission-checkbox" type="checkbox"></td>
            <td class="ui-delete"><input class="checkbox permission-checkbox" type="checkbox"></td>
            <td class="api-delete"><input class="checkbox permission-checkbox" type="checkbox"></td>
        </tr>
    </table>
    <div data-page="1" class="page-item page-number">
        <div class="page-link">1</div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src={{ asset('dist/js/roles.js') }}></script>
<!-- Bootstrap Validator -->
<script src={{ asset('dist/js/validator.min.js') }}></script>
{% endblock %}