<vdr-action-bar>
    <vdr-ab-left>
        <vdr-entity-info [entity]="entity$ | async"></vdr-entity-info>
    </vdr-ab-left>

    <vdr-ab-right>
        <vdr-action-bar-items locationId="payment-method-detail"></vdr-action-bar-items>
        <button
            class="btn btn-primary"
            *ngIf="isNew$ | async; else updateButton"
            [disabled]="detailForm.pristine || detailForm.invalid"
        >
            {{ 'common.create' | translate }}
        </button>
        <ng-template #updateButton>
            <button
                *vdrIfPermissions="'UpdateSettings'"
                class="btn btn-primary"
                (click)="save()"
                [disabled]="detailForm.pristine || detailForm.invalid"
            >
                {{ '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]="!('UpdateSettings' | hasPermission)"
        />
    </vdr-form-field>
    <vdr-form-field [label]="'common.enabled' | translate" for="description">
        <clr-toggle-wrapper>
            <input
                type="checkbox"
                clrToggle
                id="enabled"
                [vdrDisabled]="!('UpdateSettings' | hasPermission)"
                formControlName="enabled"
            />
        </clr-toggle-wrapper>
    </vdr-form-field>

    <ng-container *ngIf="entity$ | async as paymentMethod">
        <div
            class="clr-row"
            formGroupName="configArgs"
            *ngIf="paymentMethod?.configArgs?.length && configArgsIsPopulated()"
        >
            <div class="clr-col">
                <label>{{ 'settings.payment-method-config-options' | translate }}</label>
                <section class="form-block" *ngFor="let arg of paymentMethod.definition.args; index as i">
                    <vdr-form-field
                        [label]="arg.label || arg.name"
                        [for]="arg.name"
                    >
                        <vdr-dynamic-form-input
                            [def]="paymentMethod.definition.args[i]"
                            [formControlName]="arg.name"
                            [control]="detailForm.get(['configArgs', arg.name])"
                            [readonly]="!('UpdateSettings' | hasPermission)"
                        ></vdr-dynamic-form-input>
                    </vdr-form-field>
                </section>
            </div>
        </div>
    </ng-container>
</form>
