<vdr-action-bar>
    <vdr-ab-left>
        <vdr-entity-info [entity]="entity$ | async"></vdr-entity-info>
        <vdr-language-selector
            [disabled]="isNew$ | async"
            [availableLanguageCodes]="availableLanguages$ | async"
            [currentLanguageCode]="languageCode$ | async"
            (languageCodeChange)="setLanguage($event)"
        ></vdr-language-selector>
    </vdr-ab-left>
    <vdr-ab-right>
        <vdr-action-bar-items locationId="country-detail"></vdr-action-bar-items>
        <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"
                *vdrIfPermissions="updatePermission"
                (click)="save()"
                [disabled]="detailForm.invalid || detailForm.pristine"
            >
                {{ 'common.update' | translate }}
            </button>
        </ng-template>
    </vdr-ab-right>
</vdr-action-bar>

<form class="form" [formGroup]="detailForm">
    <vdr-form-field [label]="'common.code' | translate" for="code">
        <input
            id="code"
            type="text"
            formControlName="code"
            [readonly]="!(updatePermission | hasPermission)"
        />
    </vdr-form-field>
    <vdr-form-field [label]="'common.name' | translate" for="name">
        <input
            id="name"
            type="text"
            formControlName="name"
            [readonly]="!(updatePermission | hasPermission)"
        />
    </vdr-form-field>
    <vdr-form-field [label]="'common.enabled' | translate" for="enabled">
        <clr-toggle-wrapper>
            <input
                type="checkbox"
                clrToggle
                id="enabled"
                formControlName="enabled"
                [vdrDisabled]="!(updatePermission | hasPermission)"
            />
        </clr-toggle-wrapper>
    </vdr-form-field>
    <section formGroupName="customFields" *ngIf="customFields.length">
        <label>{{ 'common.custom-fields' | translate }}</label>
        <vdr-tabbed-custom-fields
            entityName="Country"
            [customFields]="customFields"
            [customFieldsFormGroup]="detailForm.get('customFields')"
            [readonly]="!(updatePermission | hasPermission)"
        ></vdr-tabbed-custom-fields>
    </section>
    <vdr-custom-detail-component-host
        locationId="country-detail"
        [entity$]="entity$"
        [detailForm]="detailForm"
    ></vdr-custom-detail-component-host>
</form>
