<h1>User Management</h1>



<button type="button" class="btn btn-success-outline" [routerLink]="['/usermanagement/add']">Add User To Ombi</button>

<button type="button" style="float:right;" class="btn btn-primary-outline"(click)="showBulkEdit = !showBulkEdit" [disabled]="!hasChecked()">Bulk Edit</button>
<div *ngIf="plexEnabled">
    <button type="button"  style="float:right;"  class="btn btn-success-outline" (click)="open()">Add Plex Friend</button>
    </div>
<!-- Table -->
<table class="table table-striped table-hover table-responsive table-condensed table-usermanagement">
    <thead>
        <tr>
            <th style="width:1%">
                <a>
                        <td class="checkbox" data-label="Select:">
                                <input id="all" type="checkbox" ng-checked="checkAll" (change)="checkAllBoxes()">
                                <label for="all"></label>
                            </td>
                </a>
            </th>
            <th class="active" (click)="setOrder('userName', $event)">
                <a>
                    Username
                </a>
                <span *ngIf="order === 'userName'">
                    <span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
                </span>
            </th>
            <th (click)="setOrder('alias', $event)">
                <a>
                    Alias
                </a>
                <span *ngIf="order === 'alias'">
                    <span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
                </span>
            </th>
            <th (click)="setOrder('emailAddress', $event)">
                <a>
                    Email
                </a>
                <span *ngIf="order === 'emailAddress'">
                    <span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span>
                    <span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
                </span>
            </th>
            <th>
                Roles
            </th>
            <th (click)="setOrder('lastLoggedIn', $event)">
               <a> Last Logged In</a>
               <span *ngIf="order === 'lastLoggedIn'">
                <span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
            </span>
            </th>
            <th (click)="setOrder('userType', $event)">
                <a>
                    User Type
                </a>
                <span *ngIf="order === 'userType'">
                    <span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
                </span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let u of users | orderBy: order : reverse : 'case-insensitive'">
            <td class="checkbox" data-label="Select:">
                <input id="{{u.id}}" type="checkbox" [(ngModel)]="u.checked">
                <label for="{{u.id}}"></label>
            </td>
            <td class="td-labelled" data-label="Username:">
                {{u.userName}}
            </td>
            <td class="td-labelled" data-label="Alias:">
                {{u.alias}}
            </td>
            <td class="td-labelled" data-label="Email:">
                {{u.emailAddress}}
            </td>
            <td class="td-labelled" data-label="Roles:">
                <div *ngFor="let claim of u.claims">
                    <span *ngIf="claim.enabled">{{claim.value}}</span>
                </div>

            </td>
            <td class="td-labelled" data-label="Last Logged In:">
                {{u.lastLoggedIn | date: 'short'}}
            </td>
            <td class="td-labelled" data-label="User Type:">
                <span *ngIf="u.userType === 1">Local User</span>
                <span *ngIf="u.userType === 2">Plex User</span>
                <span *ngIf="u.userType === 3">Emby User</span>
            </td>
            <td>
                <a [routerLink]="['/usermanagement/edit/' + u.id]" class="btn btn-sm btn-info-outline">Details/Edit</a>
            </td>
            <td *ngIf="customizationSettings">
                <button *ngIf="!u.hasLoggedIn" (click)="welcomeEmail(u)" [disabled]="!customizationSettings.applicationUrl" class="btn btn-sm btn-info-outline">Send Welcome Email</button>
            </td>
        </tr>
    </tbody>
</table>


<p-sidebar [(visible)]="showBulkEdit" position="right" styleClass="ui-sidebar-md side-back">
<h3>Bulk Edit</h3>
<hr/>
<div *ngFor="let c of availableClaims">
        <div class="form-group">
            <div class="checkbox">
                <input type="checkbox" [(ngModel)]="c.enabled" [value]="c.value" id="create{{c.value}}" [attr.name]="'create' + c.value" ng-checked="c.enabled">
                <label for="create{{c.value}}">{{c.value | humanize}}</label>
            </div>
        </div>
    </div>

    <div class="form-group">
            <label for="movieRequestLimit" class="control-label">Movie Request Limit</label>
            <div>
                <input type="text" [(ngModel)]="bulkMovieLimit" class="form-control form-small form-control-custom " id="movieRequestLimit" name="movieRequestLimit" value="{{bulkMovieLimit}}">
            </div>
        </div>

        <div class="form-group">
            <label for="episodeRequestLimit" class="control-label">Episode Request Limit</label>
            <div>
                <input type="text" [(ngModel)]="bulkEpisodeLimit" class="form-control form-small form-control-custom " id="episodeRequestLimit" name="episodeRequestLimit" value="{{bulkEpisodeLimit}}">
            </div>
        </div>
    
<button type="button" class="btn btn-success-outline" (click)="bulkUpdate()">Update Users</button>
</p-sidebar>

