<div class="row content-space">
    <div>
        <div class="row flex-items-xs-between rightPos">
            <div class="flex-xs-middle option-left"></div>
            <div class="flex-xs-middle option-right">
                <hbr-filter
                    [withDivider]="true"
                    filterPlaceholder="{{
                        'MEMBER.FILTER_PLACEHOLDER' | translate
                    }}"
                    (filterEvt)="doSearch($event)"
                    [currentValue]="searchMember"></hbr-filter>
                <span class="refresh-btn" (click)="refresh()">
                    <clr-icon shape="refresh"></clr-icon>
                </span>
            </div>
        </div>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <clr-dg-action-bar>
            <button
                class="btn btn-secondary"
                (click)="openAddMemberModal()"
                [disabled]="!hasCreateMemberPermission">
                <span
                    ><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{
                        'MEMBER.USER' | translate
                    }}</span
                >
            </button>
            <button
                class="btn btn-secondary"
                (click)="openAddGroupModal()"
                [disabled]="
                    !hasCreateMemberPermission ||
                    !(isLdapMode || isHttpAuthMode || isOidcMode)
                ">
                <span
                    ><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{
                        'MEMBER.LDAP_GROUP' | translate
                    }}</span
                >
            </button>
            <clr-dropdown
                [clrCloseMenuOnItemClick]="false"
                class="btn btn-link"
                clrDropdownTrigger>
                <span id="member-action"
                    >{{ 'MEMBER.ACTION' | translate
                    }}<clr-icon shape="caret down"></clr-icon
                ></span>
                <clr-dropdown-menu *clrIfOpen>
                    <label class="dropdown-header">{{
                        'MEMBER.SET_ROLE' | translate
                    }}</label>
                    <button
                        clrDropdownItem
                        (click)="changeMembersRole(selectedRow, 1)"
                        [disabled]="
                            !(
                                selectedRow.length && hasUpdateMemberPermission
                            ) || onlySelf
                        ">
                        {{ 'MEMBER.PROJECT_ADMIN' | translate }}
                    </button>
                    <button
                        clrDropdownItem
                        (click)="changeMembersRole(selectedRow, 4)"
                        [disabled]="
                            !(
                                selectedRow.length && hasUpdateMemberPermission
                            ) || onlySelf
                        ">
                        {{ 'MEMBER.PROJECT_MAINTAINER' | translate }}
                    </button>
                    <button
                        clrDropdownItem
                        (click)="changeMembersRole(selectedRow, 2)"
                        [disabled]="
                            !(
                                selectedRow.length && hasUpdateMemberPermission
                            ) || onlySelf
                        ">
                        {{ 'MEMBER.DEVELOPER' | translate }}
                    </button>
                    <button
                        clrDropdownItem
                        (click)="changeMembersRole(selectedRow, 3)"
                        [disabled]="
                            !(
                                selectedRow.length && hasUpdateMemberPermission
                            ) || onlySelf
                        ">
                        {{ 'MEMBER.GUEST' | translate }}
                    </button>
                    <button
                        clrDropdownItem
                        (click)="changeMembersRole(selectedRow, 5)"
                        [disabled]="
                            !(
                                selectedRow.length && hasUpdateMemberPermission
                            ) || onlySelf
                        ">
                        {{ 'MEMBER.LIMITED_GUEST' | translate }}
                    </button>
                    <div class="dropdown-divider"></div>
                    <button
                        clrDropdownItem
                        (click)="openDeleteMembersDialog(selectedRow)"
                        [disabled]="
                            !(
                                selectedRow.length && hasDeleteMemberPermission
                            ) || onlySelf
                        ">
                        {{ 'MEMBER.REMOVE' | translate }}
                    </button>
                </clr-dropdown-menu>
            </clr-dropdown>
        </clr-dg-action-bar>
        <clr-datagrid
            (clrDgRefresh)="clrDgRefresh($event)"
            [(clrDgSelected)]="selectedRow"
            [clrDgLoading]="loading"
            class="datagrid-pt">
            <clr-dg-column>{{ 'MEMBER.NAME' | translate }}</clr-dg-column>
            <clr-dg-column>{{
                'MEMBER.MEMBER_TYPE' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{ 'MEMBER.ROLE' | translate }}</clr-dg-column>
            <clr-dg-row *ngFor="let m of members" [clrDgItem]="m">
                <clr-dg-cell>{{ m.entity_name }}</clr-dg-cell>
                <clr-dg-cell>{{
                    member_type_toString(m.entity_type) | translate
                }}</clr-dg-cell>
                <clr-dg-cell>
                    <span
                        *ngIf="ChangeRoleOngoing(m.id)"
                        class="spinner spinner-inline"></span>
                    <span *ngIf="!ChangeRoleOngoing(m.id)">{{
                        roleInfo[m.role_id] | translate
                    }}</span>
                </clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <clr-dg-pagination
                    #pagination
                    [clrDgPageSize]="pageSize"
                    [(clrDgPage)]="page"
                    [clrDgTotalItems]="total">
                    <clr-dg-page-size
                        [clrPageSizeOptions]="clrPageSizeOptions"
                        >{{
                            'PAGINATION.PAGE_SIZE' | translate
                        }}</clr-dg-page-size
                    >
                    <span *ngIf="total"
                        >{{ pagination.firstItem + 1 }} -
                        {{ pagination.lastItem + 1 }}
                        {{ 'MEMBER.OF' | translate }}
                    </span>
                    {{ total }} {{ 'MEMBER.ITEMS' | translate }}
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
    <add-member
        [projectId]="projectId"
        (added)="addedMember($event)"></add-member>
    <add-group [projectId]="projectId" (added)="addedGroup($event)"></add-group>
</div>
