<div>
    <h2 id="page-heading">
        <span jhiTranslate="hsadminNgApp.userRoleAssignment.home.title">User Role Assignments</span>
        <button id="jh-create-entity" class="btn btn-primary float-right jh-create-entity create-user-role-assignment" [routerLink]="['/user-role-assignment/new']">
            <fa-icon [icon]="'plus'"></fa-icon>
            <span  jhiTranslate="hsadminNgApp.userRoleAssignment.home.createLabel">
            Create new User Role Assignment
            </span>
        </button>
    </h2>
    <jhi-alert></jhi-alert>
    <br/>
    <div class="table-responsive" *ngIf="userRoleAssignments">
        <table class="table table-striped">
            <thead>
            <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="reset.bind(this)">
                <th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon [icon]="'sort'"></fa-icon></th>
                <th jhiSortBy="entityTypeId"><span jhiTranslate="hsadminNgApp.userRoleAssignment.entityTypeId">Entity Type Id</span> <fa-icon [icon]="'sort'"></fa-icon></th>
                <th jhiSortBy="entityObjectId"><span jhiTranslate="hsadminNgApp.userRoleAssignment.entityObjectId">Entity Object Id</span> <fa-icon [icon]="'sort'"></fa-icon></th>
                <th jhiSortBy="assignedRole"><span jhiTranslate="hsadminNgApp.userRoleAssignment.assignedRole">Assigned Role</span> <fa-icon [icon]="'sort'"></fa-icon></th>
                <th jhiSortBy="user.login"><span jhiTranslate="hsadminNgApp.userRoleAssignment.user">User</span> <fa-icon [icon]="'sort'"></fa-icon></th>
                <th></th>
            </tr>

            <!-- filter start: -->
            <tr>
                <th style="width: 10%"></th>
                <th style="width: 10%"><input type="text" class="form-control" style="max-width: 20em" [(ngModel)]="filter.criteria.entityTypeId" (keyup)="filter.trigger($event)"></th>
                <th style="width: 10%"><input type="text" class="form-control" style="max-width: 20em" [(ngModel)]="filter.criteria.entityObjectId" (keyup)="filter.trigger($event)"></th>
                <th style="width: 10%">
                    <select class="form-control" [(ngModel)]="filter.criteria.assignedRole" (change)="filter.trigger($event)">
                        <option value=""></option>
                        <option value="HOSTMASTER" jhiTranslate="{{'hsadminNgApp.UserRole.HOSTMASTER'}}">HOSTMASTER</option>
                        <option value="ADMIN" jhiTranslate="{{'hsadminNgApp.UserRole.ADMIN'}}">ADMIN</option>
                        <option value="SUPPORTER" jhiTranslate="{{'hsadminNgApp.UserRole.SUPPORTER'}}">SUPPORTER</option>
                        <option value="CONTRACTUAL_CONTACT" jhiTranslate="{{'hsadminNgApp.UserRole.CUSTOMER_CONTRACTUAL_CONTACT'}}">CONTRACTUAL_CONTACT</option>
                        <option value="FINANCIAL_CONTACT" jhiTranslate="{{'hsadminNgApp.UserRole.CUSTOMER_FINANCIAL_CONTACT'}}">FINANCIAL_CONTACT</option>
                        <option value="TECHNICAL_CONTACT" jhiTranslate="{{'hsadminNgApp.UserRole.CUSTOMER_TECHNICAL_CONTACT'}}">TECHNICAL_CONTACT</option>
                        <option value="CUSTOMER_USER" jhiTranslate="{{'hsadminNgApp.UserRole.CUSTOMER_USER'}}">CUSTOMER_USER</option>
                    </select>
                </th>
                <th style="width: 30%">
                    <select id="field_user" class="form-control" name="user" [(ngModel)]="filter.criteria.userId"  (change)="filter.trigger($event)">
                        <option [ngValue]="null" selected></option>
                        <option [ngValue]="userOption.id" *ngFor="let userOption of users; trackBy: trackId">{{userOption.login}}</option>
                    </select>
                </th>
                <th style="width: 20%"><button class="btn btn-primary float-left" (click)="filter.reset()">Reset Filter</button></th>
            </tr>
            <!-- filter end. -->

            </thead>
            <tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
            <tr *ngFor="let userRoleAssignment of userRoleAssignments ;trackBy: trackId">
                <td><a [routerLink]="['/user-role-assignment', userRoleAssignment.id, 'view' ]">{{userRoleAssignment.id}}</a></td>
                <td>{{userRoleAssignment.entityTypeId}}</td>
                <td>{{userRoleAssignment.entityObjectId}}</td>
                <td jhiTranslate="{{'hsadminNgApp.UserRole.' + userRoleAssignment.assignedRole}}">{{userRoleAssignment.assignedRole}}</td>
                <td>
                    {{userRoleAssignment.user?.login}}
                </td>
                <td class="text-right">
                    <div class="btn-group flex-btn-group-container">
                        <button type="submit"
                                [routerLink]="['/user-role-assignment', userRoleAssignment.id, 'view' ]"
                                class="btn btn-info btn-sm">
                            <fa-icon [icon]="'eye'"></fa-icon>
                            <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
                        </button>
                        <button type="submit"
                                [routerLink]="['/user-role-assignment', userRoleAssignment.id, 'edit']"
                                class="btn btn-primary btn-sm">
                            <fa-icon [icon]="'pencil-alt'"></fa-icon>
                            <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
                        </button>
                        <button type="submit"
                                [routerLink]="['/', 'user-role-assignment', { outlets: { popup: userRoleAssignment.id + '/delete'} }]"
                                replaceUrl="true"
                                queryParamsHandling="merge"
                                class="btn btn-danger btn-sm">
                            <fa-icon [icon]="'times'"></fa-icon>
                            <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
