{include file="$template/includes/flashmessage.tpl"}
{assign var="usersCount" value=$users->count()}
{assign var="invitesCount" value=$invites->count()}
{assign var="ownersCount" value=0}
{foreach $users as $user}
    {if $user->pivot->owner}
        {assign var="ownersCount" value=$ownersCount+1}
    {/if}
{/foreach}

<section class="dashboard-page-section">
    <section class="dashboard-analytics-grid dashboard-analytics-grid--three">
        <article class="dashboard-analytics-card dashboard-analytics-card--green dashboard-analytics-card--spark">
            <span class="dashboard-analytics-card__icon"><i class="fas fa-users"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='navUserManagement'}</span>
                <strong class="dashboard-analytics-card__value">{$usersCount}</strong>
                <span class="dashboard-analytics-card__meta">{lang key="userManagement.usersFound" count=$usersCount}</span>
            </div>
            <span class="dashboard-analytics-card__line dashboard-analytics-card__line--green"></span>
        </article>
        <article class="dashboard-analytics-card dashboard-analytics-card--mint dashboard-analytics-card--spark">
            <span class="dashboard-analytics-card__icon"><i class="fas fa-crown"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='clientOwner'}</span>
                <strong class="dashboard-analytics-card__value">{$ownersCount}</strong>
                <span class="dashboard-analytics-card__meta">{lang key="userManagement.accountOwnerPermissionsInfo"}</span>
            </div>
            <span class="dashboard-analytics-card__line dashboard-analytics-card__line--mint"></span>
        </article>
        <article class="dashboard-analytics-card dashboard-analytics-card--amber dashboard-analytics-card--spark">
            <span class="dashboard-analytics-card__icon"><i class="fas fa-user-clock"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='userManagement.pendingInvites'}</span>
                <strong class="dashboard-analytics-card__value">{$invitesCount}</strong>
                <span class="dashboard-analytics-card__meta">{lang key='userManagement.inviteSent'}</span>
            </div>
            <span class="dashboard-analytics-card__line dashboard-analytics-card__line--amber"></span>
        </article>
    </section>

    <section class="dashboard-panel dashboard-page-table-panel">
        <div class="dashboard-page-heading dashboard-page-heading--inline">
            <div class="dashboard-page-heading__title">
                <span class="dashboard-page-heading__icon"><i class="fas fa-users-cog"></i></span>
                <div>
                    <h1 class="dashboard-page-title">{lang key='navUserManagement'}</h1>
                    <p class="dashboard-panel__copy">{lang key='userManagement.inviteNewUserDescription'}</p>
                    <div class="dashboard-page-heading__actions dashboard-page-heading__actions--user-management">
                        <a href="#inviteUserPanel" class="dashboard-link dashboard-link--hero">
                            <i class="fas fa-user-plus"></i>
                            {lang key='userManagement.inviteNewUser'}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="dashboard-panel mb-4">
            <div class="dashboard-panel__header">
                <div>
                    <h2 class="dashboard-panel__title">{lang key="navUserManagement"}</h2>
                    <p class="dashboard-panel__copy">{lang key="userManagement.usersFound" count=$usersCount}</p>
                </div>
            </div>

            <div class="table-container clearfix">
                <table class="table dashboard-table dashboard-table--rich dashboard-table--user-management">
                    <thead>
                        <tr>
                            <th>{lang key="userManagement.emailAddress"} / {lang key="userManagement.lastLogin"}</th>
                            <th class="text-right">{lang key="userManagement.actions"}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $users as $user}
                            <tr>
                                <td>
                                    <div class="dashboard-table-service dashboard-table-service--compact">
                                        <span class="dashboard-table-service__icon {if $user->pivot->owner}is-active{else}is-muted{/if}">
                                            <i class="fas fa-user"></i>
                                        </span>
                                        <div class="dashboard-table-service__copy">
                                            <strong class="dashboard-item-title">
                                                {$user->email}
                                                {if $user->pivot->owner}
                                                    <span class="status-pill info ml-2"><span>{lang key="clientOwner"}</span></span>
                                                {/if}
                                                {if $user->hasTwoFactorAuthEnabled()}
                                                    <i class="fas fa-shield text-success ml-2" data-toggle="tooltip" data-placement="auto right" title="{lang key='twoFactor.enabled'}"></i>
                                                {else}
                                                    <i class="fas fa-shield text-grey ml-2" data-toggle="tooltip" data-placement="auto right" title="{lang key='twoFactor.disabled'}"></i>
                                                {/if}
                                            </strong>
                                            <span class="dashboard-item-subtitle">
                                                {lang key="userManagement.lastLogin"}:
                                                {if $user->pivot->hasLastLogin()}
                                                    {$user->pivot->getLastLogin()->diffForHumans()}
                                                {else}
                                                    {lang key='never'}
                                                {/if}
                                            </span>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-right">
                                    <div class="dashboard-row-actions d-inline-flex align-items-center">
                                        <a href="{routePath('account-users-permissions', $user->id)}" class="btn btn-default btn-sm btn-manage-permissions{if $user->pivot->owner} disabled{/if}">
                                            {lang key="userManagement.managePermissions"}
                                        </a>
                                        <a href="#" class="btn btn-danger btn-sm btn-remove-user{if $user->pivot->owner} disabled{/if}" data-id="{$user->id}">
                                            {lang key="userManagement.removeAccess"}
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        {/foreach}
                        {if $invites->count() > 0}
                            <tr>
                                <td colspan="2">
                                    <strong>{lang key="userManagement.pendingInvites"}</strong>
                                </td>
                            </tr>
                            {foreach $invites as $invite}
                                <tr>
                                    <td>
                                        <div class="dashboard-table-service dashboard-table-service--compact">
                                            <span class="dashboard-table-service__icon is-pending">
                                                <i class="fas fa-envelope-open"></i>
                                            </span>
                                            <div class="dashboard-table-service__copy">
                                                <strong class="dashboard-item-title">{$invite->email}</strong>
                                                <span class="dashboard-item-subtitle">
                                                    {lang key="userManagement.inviteSent"}:
                                                    {$invite->created_at->diffForHumans()}
                                                </span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-right">
                                        <form method="post" action="{routePath('account-users-invite-resend')}" class="d-inline-flex align-items-center gap-2">
                                            <input type="hidden" name="inviteid" value="{$invite->id}">
                                            <button type="submit" class="btn btn-default btn-sm">
                                                {lang key="userManagement.resendInvite"}
                                            </button>
                                            <button type="button" class="btn btn-default btn-sm btn-cancel-invite" data-id="{$invite->id}">
                                                {lang key="userManagement.cancelInvite"}
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            {/foreach}
                        {/if}
                    </tbody>
                </table>
            </div>

            <p class="text-muted m-0">* {lang key="userManagement.accountOwnerPermissionsInfo"}</p>
        </div>

        <div class="dashboard-panel" id="inviteUserPanel">
            <div class="dashboard-panel__header">
                <div>
                    <h2 class="dashboard-panel__title">{lang key="userManagement.inviteNewUser"}</h2>
                    <p class="dashboard-panel__copy">{lang key="userManagement.inviteNewUserDescription"}</p>
                </div>
            </div>

            <form method="post" action="{routePath('account-users-invite')}">
                <div class="form-group">
                    <input type="email" name="inviteemail" placeholder="{lang key='userManagement.emailAddress'}" class="form-control" value="{$formdata.inviteemail}">
                </div>
                <div class="form-group">
                    <label class="form-check form-check-inline">
                        <input type="radio" class="form-check-input" name="permissions" value="all" checked="checked">
                        {lang key="userManagement.allPermissions"}
                    </label>
                    <label class="form-check form-check-inline">
                        <input type="radio" class="form-check-input" name="permissions" value="choose">
                        {lang key="userManagement.choosePermissions"}
                    </label>
                </div>
                <div class="well mb-3 w-hidden" id="invitePermissions">
                    {foreach $permissions as $permission}
                        <label class="form-check d-block mb-3">
                            <input type="checkbox" class="form-check-input mr-2" name="perms[{$permission.key}]" value="1">
                            <span>{$permission.title}</span>
                            <br>
                            <span class="text-muted">{$permission.description}</span>
                        </label>
                    {/foreach}
                </div>
                <button type="submit" class="btn btn-primary">
                    {lang key="userManagement.sendInvite"}
                </button>
            </form>
        </div>
    </section>
</section>

<form method="post" action="{routePath('user-accounts')}">
    <input type="hidden" name="id" value="" id="inputSwitchAcctId">
</form>

<form method="post" action="{routePath('account-users-remove')}">
    <input type="hidden" name="userid" id="inputRemoveUserId">
    <div class="modal fade" id="modalRemoveUser">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header card-header bg-primary text-light">
                    <h4 class="modal-title">
                        {lang key="userManagement.removeAccess"}
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="{lang key='close'}"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <p>{lang key="userManagement.removeAccessSure"}</p>
                    <p>{lang key="userManagement.removeAccessInfo"}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {lang key="cancel"}
                    </button>
                    <button type="submit" class="btn btn-primary" id="btnRemoveUserConfirm">
                        {lang key="confirm"}
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<form method="post" action="{routePath('account-users-invite-cancel')}">
    <input type="hidden" name="inviteid" id="inputCancelInviteId">
    <div class="modal fade" id="modalCancelInvite">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header card-header bg-primary text-light">
                    <h4 class="modal-title">
                        {lang key="userManagement.cancelInvite"}
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="{lang key='close'}"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <p>{lang key="userManagement.cancelInviteSure"}</p>
                    <p>{lang key="userManagement.cancelInviteInfo"}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {lang key="cancel"}
                    </button>
                    <button type="submit" class="btn btn-primary" id="btnCancelInviteConfirm">
                        {lang key="confirm"}
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    jQuery(document).ready(function() {
        jQuery('input:radio[name=permissions]').change(function () {
            if (this.value === 'choose') {
                jQuery('#invitePermissions').slideDown();
            } else {
                jQuery('#invitePermissions').slideUp();
            }
        });
        jQuery('.btn-manage-permissions').click(function(e) {
            if (jQuery(this).attr('disabled')) {
                e.preventDefault();
            }
        });
        jQuery('.btn-remove-user').click(function(e) {
            e.preventDefault();
            if (jQuery(this).attr('disabled')) {
                return;
            }
            jQuery('#inputRemoveUserId').val(jQuery(this).data('id'));
            jQuery('#modalRemoveUser').modal('show');
        });
        jQuery('.btn-cancel-invite').click(function(e) {
            e.preventDefault();
            jQuery('#inputCancelInviteId').val(jQuery(this).data('id'));
            jQuery('#modalCancelInvite').modal('show');
        });
    });
</script>
