<h4>
    <span translate>Submitters</span>
    <button
        class="small-button"
        type="button"
        mat-icon-button
        disableRipple
        *ngIf="!isEditMode && perms.isAllowed('change_metadata')"
        (click)="onEdit()"
    >
        <mat-icon>edit</mat-icon>
    </button>
</h4>

<div *ngIf="!isEditMode || !perms.isAllowed('change_metadata')">
    <mat-chip-list *ngFor="let user of motion.submittersAsUsers" class="user">
        <mat-basic-chip disableRipple *ngIf="user">{{ user.getTitle() }}</mat-basic-chip>
    </mat-chip-list>
</div>

<div *ngIf="isEditMode && perms.isAllowed('change_metadata')">
    <os-sorting-list
        [input]="editSubmitterObservable"
        [live]="true"
        [count]="false"
        (sortEvent)="onSortingChange($event)"
    >
        <!-- implicit user references into the component using ng-template slot -->
        <ng-template let-user>
            <button type="button" mat-icon-button matTooltip="{{ 'Remove' | translate }}" (click)="onRemove(user)">
                <mat-icon>close</mat-icon>
            </button>
        </ng-template>
    </os-sorting-list>

    <form *ngIf="users && users.value.length > 0" [formGroup]="addSubmitterForm">
        <os-search-value-selector
            class="search-users"
            ngDefaultControl
            [formControl]="addSubmitterForm.get('userId')"
            listname="{{ 'Select or search new submitter ...' | translate }}"
            [inputListValues]="users"
        ></os-search-value-selector>
    </form>

    <p>
        <button type="button" mat-button (click)="onSave()"><span translate>Save</span></button>
        <button type="button" mat-button (click)="onCancel()"><span translate>Cancel</span></button>
    </p>
</div>
