<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.pristine || detailForm.invalid"
        >
            {{ 'common.create' | translate }}
        </button>
        <ng-template #updateButton>
            <button
                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">
    <section class="form-block">
        <vdr-form-field [label]="'common.code' | translate" for="code">
            <input id="code" type="text" formControlName="code" />
        </vdr-form-field>
    </section>
    <section class="form-block">
        <vdr-form-field [label]="'common.description' | translate" for="description">
            <input id="description" type="text" formControlName="description" />
        </vdr-form-field>
    </section>

    <div class="clr-row">
        <div class="clr-col">
            <label>{{ 'settings.shipping-eligibility-checker' | translate }}</label>
            <vdr-configurable-input
                *ngIf="selectedChecker"
                [operation]="selectedChecker"
                (remove)="selectedChecker = null"
                formControlName="checker"
            ></vdr-configurable-input>
            <div *ngIf="!selectedChecker">
                <clr-dropdown>
                    <div clrDropdownTrigger>
                        <button class="btn btn-outline">
                            <clr-icon shape="plus"></clr-icon>
                            {{ 'common.select' | translate }}
                        </button>
                    </div>
                    <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
                        <button
                            *ngFor="let checker of checkers"
                            type="button"
                            clrDropdownItem
                            (click)="selectedChecker = checker"
                        >
                            {{ checker.description }}
                        </button>
                    </clr-dropdown-menu>
                </clr-dropdown>
            </div>
        </div>
        <div class="clr-col">
            <label>{{ 'settings.shipping-calculator' | translate }}</label>
            <vdr-configurable-input
                *ngIf="selectedCalculator"
                [operation]="selectedCalculator"
                (remove)="selectedCalculator = null"
                formControlName="calculator"
            ></vdr-configurable-input>
            <div *ngIf="!selectedCalculator">
                <clr-dropdown>
                    <div clrDropdownTrigger>
                        <button class="btn btn-outline">
                            <clr-icon shape="plus"></clr-icon>
                            {{ 'common.select' | translate }}
                        </button>
                    </div>
                    <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
                        <button
                            *ngFor="let calculator of calculators"
                            type="button"
                            clrDropdownItem
                            (click)="selectedCalculator = calculator"
                        >
                            {{ calculator.description }}
                        </button>
                    </clr-dropdown-menu>
                </clr-dropdown>
            </div>
        </div>
    </div>
</form>
