<form [formGroup]="form">
    <div class="iqser-input-group w-300 required">
        <label>{{ 'assign-dossier-owner.dialog.single-user' | translate }}</label>
        <mat-form-field>
            <mat-select (valueChange)="onChangeOwner($event)" formControlName="owner" id="editDossierOwnerSelect">
                <mat-option *ngFor="let userId of ownersSelectOptions; let index = index" [id]="'mat-option-' + index" [value]="userId">
                    {{ userId | name }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>

    <ng-container *ngIf="selectedApprovers$ | async as selectedApprovers">
        <ng-container *ngIf="selectedApprovers.length">
            <div class="all-caps-label mt-16" id="approversLabel" translate="assign-dossier-owner.dialog.approvers"></div>
            <redaction-team-members
                (remove)="toggleSelected($event)"
                [canAdd]="false"
                [canRemove]="hasOwner && !disabled"
                [dossierId]="dossier.id"
                [largeSpacing]="true"
                [memberIds]="selectedApprovers"
                [perLine]="13"
                [unremovableMembers]="[this.form.value.owner]"
            ></redaction-team-members>
        </ng-container>
    </ng-container>

    <div *ngIf="!isDocumine">
        <div class="all-caps-label mt-16" id="reviewersLabel" translate="assign-dossier-owner.dialog.reviewers"></div>

        <redaction-team-members
            (remove)="toggleSelected($event)"
            [canAdd]="false"
            [canRemove]="hasOwner && !disabled"
            [dossierId]="dossier.id"
            [largeSpacing]="true"
            [memberIds]="selectedReviewers$ | async"
            [perLine]="13"
            [unremovableMembers]="[this.form.value.owner]"
        ></redaction-team-members>

        <ng-container *ngIf="!(selectedReviewers$ | async)?.length">
            <div class="info mt-4" id="no-reviewers-label">{{ 'assign-dossier-owner.dialog.no-reviewers' | translate }}</div>
        </ng-container>
    </div>

    <ng-container *ngIf="hasOwner && !disabled">
        <iqser-input-with-action
            (valueChange)="setMembersSelectOptions($event)"
            [(value)]="searchQuery"
            [placeholder]="'assign-dossier-owner.dialog.search' | translate"
            [width]="560"
            class="search-container"
        ></iqser-input-with-action>

        <div class="members-list">
            <div
                (click)="!disabled && (!isDocumine ? toggleSelected(userId) : toggleApprover(userId))"
                *ngFor="let userId of membersSelectOptions; let index = index"
                [class.disabled]="disabled"
                [class.selected]="!isDocumine ? isMemberSelected(userId) : isApprover(userId)"
                [id]="'member-' + index"
            >
                <iqser-initials-avatar [user]="userId" [withName]="true" size="large"></iqser-initials-avatar>

                <div class="actions" *ngIf="!isDocumine">
                    <div
                        (click)="!disabled && toggleApprover(userId)"
                        *ngIf="!disabled || isApprover(userId)"
                        class="make-approver"
                        iqserStopPropagation
                    >
                        <iqser-round-checkbox
                            [active]="isApprover(userId)"
                            [disabled]="disabled"
                            [id]="'round-checkbox-' + index"
                            class="mr-8"
                        ></iqser-round-checkbox>

                        <span
                            [translate]="disabled ? 'assign-dossier-owner.dialog.approver' : 'assign-dossier-owner.dialog.make-approver'"
                        ></span>
                    </div>
                    <mat-icon svgIcon="iqser:check"></mat-icon>
                </div>
            </div>
        </div>
    </ng-container>
</form>
