<div class="modal-header">
    <h2 class="mat-dialog-title" mat-dialog-title>
        <span trans>Assign users to:</span>
        <span class="capitalize"> {{role && role.name}}</span>
    </h2>
    <button type="button" (click)="close()" class="close-button no-style icon-button"><mat-icon svgIcon="close"></mat-icon></button>
</div>

<form autocomplete="off" ngNativeValidate (submit)="confirm()">
    <div class="mat-dialog-content" mat-dialog-content>
        <div class="errors">
            <div class="error" *ngIf="errors.emails" trans>Could not find any users with these email addresses.</div>
        </div>

        <div class="many-inputs">
            <div class="assign-users">
                <div class="label" trans>Users</div>
                <button class="no-style more" (click)="assignMoreUsers()" type="button" trans>Assign More</button>
            </div>
            <div class="input-container with-addon" *ngFor="let obj of emails; let i = index">
                <input type="email" [(ngModel)]="emails[i].email" name="{{i}}" id="{{i}}" placeholder="Email Address" required>
                <button class="input-addon lesser no-style" (click)="removeUser(i)" type="button"><mat-icon svgIcon="close"></mat-icon></button>
                <div class="error" *ngIf="errors['emails.'+i]">{{errors['emails.'+i]}}</div>
            </div>
        </div>
    </div>

    <div class="buttons right" mat-dialog-actions>
        <button (click)="close()" mat-button type="button" class="button cancel" trans>Cancel</button>
        <button type="submit" mat-raised-button color="accent" class="button primary" trans>Assign</button>
    </div>
</form>
