<vdr-action-bar>
    <vdr-ab-left></vdr-ab-left>
    <vdr-ab-right>
        <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()"
                [disabled]="(detailForm.invalid || detailForm.pristine) && !permissionsChanged"
            >
                {{ 'common.update' | translate }}
            </button>
        </ng-template>
    </vdr-ab-right>
</vdr-action-bar>

<form class="form" [formGroup]="detailForm">
    <section class="form-block">
        <label>{{ 'settings.administrator' | translate }}</label>
        <vdr-form-field [label]="'settings.email-address' | translate" for="emailAddress">
            <input id="emailAddress" type="text" formControlName="emailAddress" />
        </vdr-form-field>
        <vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
            <input id="firstName" type="text" formControlName="firstName" />
        </vdr-form-field>
        <vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
            <input id="lastName" type="text" formControlName="lastName" />
        </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)"
            [label]="'settings.password' | translate"
            for="password"
            [readOnlyToggle]="true"
        >
            <input id="password" type="password" formControlName="password" />
        </vdr-form-field>
    </section>
    <section class="form-block">
        <label>{{ 'settings.roles' | translate }}</label>
        <ng-select
            [items]="allRoles$ | async"
            [multiple]="true"
            [hideSelected]="true"
            formControlName="roles"
            (change)="rolesChanged($event)"
            bindLabel="description"
        ></ng-select>
    </section>

    <vdr-permission-grid [permissions]="selectedRolePermissions" [readonly]="true"></vdr-permission-grid>
</form>
