<vdr-page-block>
    <vdr-action-bar>
        <vdr-ab-left> </vdr-ab-left>
        <vdr-ab-right>
            <vdr-action-bar-items locationId="administrator-detail" />
            <button
                class="btn btn-primary"
                *ngIf="isNew$ | async; else updateButton"
                (click)="create()"
                [disabled]="detailForm.invalid || detailForm.pristine"
            >
                {{ 'common.create' | translate }}
            </button>
            <ng-template #updateButton>
                <button
                    class="btn btn-primary"
                    (click)="save()"
                    *vdrIfPermissions="'UpdateAdministrator'"
                    [disabled]="detailForm.invalid || detailForm.pristine"
                >
                    {{ 'common.update' | translate }}
                </button>
            </ng-template>
            <vdr-action-bar-dropdown-menu locationId="administrator-detail" />
        </vdr-ab-right>
    </vdr-action-bar>
</vdr-page-block>

<form class="form" [formGroup]="detailForm">
    <vdr-page-detail-layout>
        <vdr-page-detail-sidebar>
            <vdr-card *ngIf="entity$ | async as entity">
                <vdr-page-entity-info [entity]="entity" />
            </vdr-card>
        </vdr-page-detail-sidebar>
        <vdr-page-block>
            <vdr-card>
                <div class="form-grid">
                    <vdr-form-field
                        [label]="'settings.email-address-or-identifier' | translate"
                        for="emailAddress"
                        class="form-grid-span"
                    >
                        <input
                            id="emailAddress"
                            type="text"
                            formControlName="emailAddress"
                            [readonly]="!(['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)"
                        />
                    </vdr-form-field>
                    <vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
                        <input
                            id="firstName"
                            type="text"
                            formControlName="firstName"
                            [readonly]="!(['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)"
                        />
                    </vdr-form-field>
                    <vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
                        <input
                            id="lastName"
                            type="text"
                            formControlName="lastName"
                            [readonly]="!(['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)"
                        />
                    </vdr-form-field>
                    <vdr-form-field
                        *ngIf="isNew$ | async"
                        [label]="'settings.password' | translate"
                        for="password"
                    >
                        <input id="password" type="password" formControlName="password" />
                    </vdr-form-field>
                    <vdr-form-field
                        *ngIf="
                            !(isNew$ | async) &&
                            (['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)
                        "
                        [label]="'settings.password' | translate"
                        for="password"
                        [readOnlyToggle]="true"
                    >
                        <input id="password" type="password" formControlName="password" />
                    </vdr-form-field>
                </div>
            </vdr-card>

            <vdr-card
                formGroupName="customFields"
                *ngIf="customFields.length"
                [title]="'common.custom-fields' | translate"
            >
                <vdr-tabbed-custom-fields
                    entityName="Administrator"
                    [customFields]="customFields"
                    [customFieldsFormGroup]="detailForm.get('customFields')"
                ></vdr-tabbed-custom-fields>
            </vdr-card>
            <vdr-custom-detail-component-host
                locationId="administrator-detail"
                [entity$]="entity$"
                [detailForm]="detailForm"
            ></vdr-custom-detail-component-host>
        </vdr-page-block>
    </vdr-page-detail-layout>
    <vdr-page-block>
        <vdr-card [title]="'settings.roles' | translate">
            <ng-select
                [items]="allRoles$ | async"
                [multiple]="true"
                [hideSelected]="true"
                formControlName="roles"
                (change)="rolesChanged($event)"
                bindLabel="description"
            ></ng-select>

            <ul class="nav mt-2" role="tablist">
                <li role="presentation" class="nav-item" *ngFor="let channel of getAvailableChannels()">
                    <button
                        [id]="channel.channelId"
                        (click)="selectedChannelId = channel.channelId"
                        class="btn btn-link nav-link"
                        [class.active]="selectedChannelId === channel.channelId"
                        [attr.aria-selected]="selectedChannelId === channel.channelId"
                        type="button"
                    >
                        {{ channel.channelCode | channelCodeToLabel | translate }}
                    </button>
                </li>
            </ul>
            <vdr-permission-grid
                [activePermissions]="getPermissionsForSelectedChannel()"
                [permissionDefinitions]="permissionDefinitions"
                [readonly]="true"
            ></vdr-permission-grid>
        </vdr-card>
    </vdr-page-block>
</form>
