<main class="container-xl">
    <div id="users-block" class="my-3 p-3 rounded shadow">
        <h6 class="border-bottom pb-2 mb-3">Registered Users</h6>
        <div class="table-responsive-xl small">
            <table id="users-table" class="table table-sm table-striped table-hover">
                <thead>
                    <tr>
                        <th class="vw-account-details">User</th>
                        {{#if sso_enabled}}
                        <th class="vw-sso-identifier">SSO Identifier</th>
                        {{/if}}
                        <th class="vw-created-at">Created at</th>
                        <th class="vw-last-active">Last Active</th>
                        <th class="vw-entries">Entries</th>
                        <th class="vw-attachments">Attachments</th>
                        <th class="vw-organizations">Organizations</th>
                        <th class="vw-actions">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each page_data}}
                    <tr>
                        <td>
                            <svg width="48" height="48" class="float-start me-2 rounded" data-jdenticon-value="{{email}}">
                            <div>
                                <strong>{{name}}</strong>
                                <span class="d-block">{{email}}</span>
                                <span class="d-block">
                                    {{#unless user_enabled}}
                                        <span class="badge bg-danger me-2" title="User is disabled">Disabled</span>
                                    {{/unless}}
                                    {{#if twoFactorEnabled}}
                                        <span class="badge bg-success me-2" title="2FA is enabled">2FA</span>
                                    {{/if}}
                                    {{#case _status 1}}
                                        <span class="badge bg-warning text-dark me-2" title="User is invited">Invited</span>
                                    {{/case}}
                                    {{#if emailVerified}}
                                        <span class="badge bg-success me-2" title="Email has been verified">Verified</span>
                                    {{/if}}
                                </span>
                            </div>
                        </td>
                        {{#if ../sso_enabled}}
                        <td>
                            <span class="d-block">{{sso_identifier}}</span>
                        </td>
                        {{/if}}
                        <td>
                            <span class="d-block">{{created_at}}</span>
                        </td>
                        <td>
                            <span class="d-block">{{last_active}}</span>
                        </td>
                        <td>
                            <span class="d-block">{{cipher_count}}</span>
                        </td>
                        <td>
                            <span class="d-block"><strong>Amount:</strong> {{attachment_count}}</span>
                            {{#if attachment_count}}
                            <span class="d-block"><strong>Size:</strong> {{attachment_size}}</span>
                            {{/if}}
                        </td>
                        <td>
                            <div class="overflow-auto vw-org-cell" data-vw-user-email="{{email}}" data-vw-user-uuid="{{id}}">
                            {{#each organizations}}
                            <button class="badge" data-bs-toggle="modal" data-bs-target="#userOrgTypeDialog" data-vw-org-type="{{type}}" data-vw-org-uuid="{{id}}" data-vw-org-name="{{name}}">{{name}}</button>
                            {{/each}}
                            </div>
                        </td>
                        <td class="text-end px-1 small">
                            <span data-vw-user-uuid="{{id}}" data-vw-user-email="{{email}}">
                                {{#if twoFactorEnabled}}
                                <button type="button" class="btn btn-sm btn-link p-0 border-0 float-right" vw-remove2fa>Remove all 2FA</button><br>
                                {{/if}}
                                <button type="button" class="btn btn-sm btn-link p-0 border-0 float-right" vw-deauth-user>Deauthorize sessions</button><br>
                                <button type="button" class="btn btn-sm btn-link p-0 border-0 float-right" vw-delete-user>Delete User</button><br>
                                {{#if ../sso_enabled}}
                                <button type="button" class="btn btn-sm btn-link p-0 border-0 float-right" vw-delete-sso-user>Delete SSO Association</button><br>
                                {{/if}}
                                {{#if user_enabled}}
                                <button type="button" class="btn btn-sm btn-link p-0 border-0 float-right" vw-disable-user>Disable User</button><br>
                                {{else}}
                                <button type="button" class="btn btn-sm btn-link p-0 border-0 float-right" vw-enable-user>Enable User</button><br>
                                {{/if}}
                                {{#case _status 1}}
                                <button type="button" class="btn btn-sm btn-link p-0 border-0 float-right" vw-resend-user-invite>Resend invite</button><br>
                                {{/case}}
                            </span>
                        </td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>

        <div class="mt-3 clearfix">
            <button type="button" class="btn btn-sm btn-danger" id="updateRevisions"
                title="Force all clients to fetch new data next time they connect. Useful after restoring a backup to remove any stale data.">
                Force clients to resync
            </button>

            <button type="button" class="btn btn-sm btn-primary float-end" id="reload">Reload users</button>
        </div>
    </div>

    <div id="inviteUserFormBlock" class="align-items-center p-3 mb-3 text-white-50 bg-secondary rounded shadow">
        <div>
            <h6 class="mb-0 text-white">Invite User</h6>
            <small>Email:</small>

            <form class="form-inline input-group w-50" id="inviteUserForm">
                <input type="email" class="form-control me-2" id="inviteEmail" placeholder="Enter email" required spellcheck="false">
                <button type="submit" class="btn btn-primary">Invite</button>
            </form>
        </div>
    </div>

    <div id="userOrgTypeDialog" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">
                        <b>Update User Type:</b><br><b>Organization:</b> <span id="userOrgTypeDialogOrgName"></span><br><b>User:</b> <span id="userOrgTypeDialogUserEmail"></span>
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form class="form" id="userOrgTypeForm">
                    <input type="hidden" name="user_uuid" id="userOrgTypeUserUuid" value="">
                    <input type="hidden" name="org_uuid" id="userOrgTypeOrgUuid" value="">
                    <div class="modal-body">
                        <div class="radio">
                            <label><input type="radio" value="2" class="form-radio-input" name="user_type" id="userOrgTypeUser">&nbsp;User</label>
                        </div>
                        <div class="radio">
                            <label><input type="radio" value="3" class="form-radio-input" name="user_type" id="userOrgTypeManager">&nbsp;Manager</label>
                        </div>
                        <div class="radio">
                            <label><input type="radio" value="1" class="form-radio-input" name="user_type" id="userOrgTypeAdmin">&nbsp;Admin</label>
                        </div>
                        <div class="radio">
                            <label><input type="radio" value="0" class="form-radio-input" name="user_type" id="userOrgTypeOwner">&nbsp;Owner</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-sm btn-primary">Change Role</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</main>

<link rel="stylesheet" href="{{urlpath}}/vw_static/datatables.css" />
<script src="{{urlpath}}/vw_static/jquery-4.0.0.slim.js"></script>
<script src="{{urlpath}}/vw_static/datatables.js"></script>
<script src="{{urlpath}}/vw_static/admin_users.js"></script>
<script src="{{urlpath}}/vw_static/jdenticon-3.3.0.js"></script>
