<os-head-bar
    [hasMainButton]="isAllowed('changePersonal')"
    mainButtonIcon="edit"
    [nav]="false"
    [goBack]="!isAllowed('seeOtherUsers')"
    [editMode]="editUser"
    [isSaveButtonEnabled]="personalInfoForm.valid"
    (mainEvent)="setEditMode(!editUser)"
    (saveEvent)="saveUser()"
>
    <!-- Title -->
    <div class="title-slot">
        <h2>
            <span *ngIf="newUser" translate>New participant</span>
            <span *ngIf="!newUser && user">{{ user.full_name }}</span>
        </h2>
    </div>

    <!-- Menu -->
    <div class="menu-slot">
        <button
            type="button"
            mat-icon-button
            *ngIf="isAllowed('changePersonal') && isAllowed('changePassword')"
            [matMenuTriggerFor]="userExtraMenu"
        >
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>

    <mat-menu #userExtraMenu="matMenu">
        <button mat-menu-item *ngIf="isAllowed('changePassword')" (click)="changePassword()">
            <mat-icon>security</mat-icon>
            <span translate>Change password</span>
        </button>
        <!-- invitation email -->
        <button mat-menu-item *ngIf="isAllowed('manage') && user && user.email" (click)="sendInvitationEmail()">
            <mat-icon>mail</mat-icon>
            <span translate>Send invitation email</span>
        </button>
        <!-- PDF -->
        <button mat-menu-item *ngIf="isAllowed('manage')" (click)="onDownloadPdf()">
            <mat-icon>picture_as_pdf</mat-icon>
            <span translate>PDF</span>
        </button>
        <!-- delete button -->
        <div *ngIf="isAllowed('delete')">
            <mat-divider></mat-divider>
            <button mat-menu-item class="red-warning-text" (click)="deleteUserButton()">
                <mat-icon>delete</mat-icon>
                <span translate>Delete</span>
            </button>
        </div>
    </mat-menu>
</os-head-bar>

<div class="content-container">
    <mat-card [ngClass]="editUser ? 'os-form-card' : 'os-card'" *ngIf="isAllowed('seeName')">
        <ng-container *ngIf="editUser; then editView; else showView"></ng-container>
    </mat-card>
</div>

<ng-template #editView>
    <form [formGroup]="personalInfoForm" (keydown)="onKeyDown($event)">
        <div *ngIf="isAllowed('seeName')">
            <!-- Title -->
            <mat-form-field class="form16 distance force-min-with">
                <input
                    type="text"
                    matInput
                    osAutofocus
                    placeholder="{{ 'Title' | translate }}"
                    formControlName="title"
                />
            </mat-form-field>
            <!-- First name -->
            <mat-form-field class="form37 distance force-min-with">
                <input
                    type="text"
                    matInput
                    placeholder="{{ 'Given name' | translate }}"
                    formControlName="first_name"
                />
            </mat-form-field>

            <!-- Last name -->
            <mat-form-field class="form37 force-min-with">
                <input
                    type="text"
                    matInput
                    placeholder="{{ 'Surname' | translate }}"
                    formControlName="last_name"
                />
            </mat-form-field>
        </div>

        <div *ngIf="isAllowed('seePersonal')">
            <!-- E-Mail -->
            <mat-form-field class="form70 distance">
                <input
                    type="email"
                    matInput
                    autocomplete="off"
                    placeholder="{{ 'Email' | translate }}"
                    name="email"
                    formControlName="email"
                />
                <mat-error *ngIf="personalInfoForm.get('email').hasError('email')" translate>
                    Please enter a valid email address
                </mat-error>
            </mat-form-field>

            <!-- Gender -->
            <mat-form-field class="form25 force-min-with">
                <mat-select placeholder="{{ 'Gender' | translate }}" formControlName="gender">
                    <mat-option>-</mat-option>
                    <mat-option *ngFor="let gender of genderList" [value]="gender">{{ gender | translate }}</mat-option>
                </mat-select>
            </mat-form-field>
        </div>

        <div>
            <!-- Strucuture Level -->
            <mat-form-field class="form70 distance">
                <input
                    type="text"
                    matInput
                    placeholder="{{ 'Structure level' | translate }}"
                    formControlName="structure_level"
                />
            </mat-form-field>
            <!-- Participant Number -->
            <mat-form-field class="form25 force-min-with">
                <input
                    type="text"
                    matInput
                    placeholder="{{ 'Participant number' | translate }}"
                    formControlName="number"
                />
            </mat-form-field>
        </div>

        <div>
            <!-- Groups -->
            <os-search-value-selector
                ngDefaultControl
                [formControl]="personalInfoForm.get('groups_id')"
                [multiple]="true"
                listname="{{ 'Groups' | translate }}"
                [inputListValues]="groups"
            ></os-search-value-selector>
        </div>

        <div *ngIf="isAllowed('manage')">
            <!-- Initial Password -->
            <mat-form-field>
                <input
                    matInput
                    autocomplete="off"
                    placeholder="{{ 'Initial password' | translate }}"
                    formControlName="default_password"
                />
                <mat-hint align="end">Generate</mat-hint>
                <button
                    type="button"
                    mat-button
                    matSuffix
                    mat-icon-button
                    [disabled]="!newUser"
                    (click)="generatePassword()"
                >
                    <mat-icon>sync_problem</mat-icon>
                </button>
            </mat-form-field>
        </div>

        <!-- About me -->
        <div *ngIf="isAllowed('seePersonal')" class="spacer-bottom-20">
            <!-- The HTML Editor -->
            <h4 translate>About me</h4>
            <editor formControlName="about_me" [init]="tinyMceSettings"></editor>
        </div>

        <div *ngIf="isAllowed('seePersonal')">
            <!-- username -->
            <mat-form-field>
                <input
                    type="text"
                    matInput
                    placeholder="{{ 'Username' | translate }}"
                    formControlName="username"
                />
            </mat-form-field>
        </div>

        <div *ngIf="isAllowed('seeExtra')">
            <!-- Comment -->
            <mat-form-field>
                <input
                    matInput
                    placeholder="{{ 'Comment' | translate }}"
                    formControlName="comment"
                />
                <mat-hint translate>Only for internal notes.</mat-hint>
            </mat-form-field>
        </div>

        <div *ngIf="isAllowed('seeExtra')" class="spacer-top-20">
            <!-- Present? -->
            <mat-checkbox
                formControlName="is_present"
                matTooltip="{{ 'Designates whether this user is in the room.' | translate }}"
            >
                <span translate>Is present</span>
            </mat-checkbox>

            <!-- Active? -->
            <mat-checkbox
                *osPerms="'users.can_see_extra_data'"
                formControlName="is_active"
                matTooltip="{{
                    'Designates whether this user should be treated as active. Unselect this instead of deleting the account.'
                        | translate
                }}"
            >
                <span translate>Is active</span>
            </mat-checkbox>

            <!-- Commitee? -->
            <mat-checkbox
                formControlName="is_committee"
                matTooltip="{{ 'Designates whether this user should be treated as a committee.' | translate }}"
            >
                <span translate>Is a committee</span>
            </mat-checkbox>
        </div>
    </form>
</ng-template>

<ng-template #showView>
    <ng-container *ngIf="user">
        <!-- User name -->
        <div *ngIf="isAllowed('seeName')">
            <h4 translate>Name</h4>
            <span class="state-icons">
                <span>{{ user.short_name }}</span>
                <mat-icon *ngIf="user.is_present" matTooltip="{{ 'Is present' | translate }}">check_box</mat-icon>
                <mat-icon *ngIf="user.is_committee" matTooltip="{{ 'Is committee' | translate }}">account_balance</mat-icon>
                <mat-icon *ngIf="!user.is_active && isAllowed('seeExtra')" matTooltip="{{ 'Inactive' | translate }}"
                    >block</mat-icon
                >
            </span>
        </div>

        <div *ngIf="isAllowed('seePersonal')">
            <!-- Mail -->
            <div *ngIf="user.email">
                <h4 translate>Email</h4>
                <span>{{ user.email }}</span>
            </div>

            <!-- Gender -->
            <div *ngIf="user.gender">
                <h4 translate>Gender</h4>
                <span>{{ user.gender | translate }}</span>
            </div>
        </div>

        <!-- Structure Level -->
        <div *ngIf="user.structure_level">
            <h4 translate>Structure level</h4>
            <span>{{ user.structure_level }}</span>
        </div>

        <!-- Participant number -->
        <div *ngIf="user.number">
            <h4 translate>Participant number</h4>
            <span>{{ user.number }}</span>
        </div>

        <!-- Groups -->
        <div *ngIf="user.groups && user.groups.length > 0">
            <h4 translate>Groups</h4>
            <span *ngFor="let group of user.groups; let last = last">
                {{ group.getTitle() | translate }}<span *ngIf="!last">,&nbsp;</span>
            </span>
        </div>
        <div *ngIf="!user.groups || user.groups.length === 0">
            <h4 translate>Groups</h4>
            <span translate>Default group</span>
        </div>

        <div *ngIf="isAllowed('manage')">
            <!-- Initial Password -->
            <div *ngIf="user.default_password">
                <h4 translate>Initial password</h4>
                <span>{{ user.default_password }}</span>
            </div>
        </div>

        <div *ngIf="isAllowed('seePersonal')">
            <!-- About me -->
            <div *ngIf="user.about_me">
                <h4 translate>About me</h4>
                <div [innerHTML]="user.about_me | trust: 'html'"></div>
            </div>

            <!-- Username -->
            <div *ngIf="user.username">
                <h4 translate>Username</h4>
                <span>{{ user.username }}</span>
            </div>
        </div>

        <div *ngIf="isAllowed('seeExtra')">
            <!-- Comment -->
            <div *ngIf="user.comment">
                <h4 translate>Comment</h4>
                <span>{{ user.comment }}</span>
            </div>
        </div>

        <div *ngIf="isAllowed('seePersonal') && user.isLastEmailSend">
            <div>
                <h4 translate>Last email sent</h4>
                <span>{{ getEmailSentTime() }}</span>
            </div>
        </div>
    </ng-container>
</ng-template>
