<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]="!saveButtonEnabled()"
        >
            {{ 'common.create' | translate }}
        </button>
        <ng-template #updateButton>
            <button class="btn btn-primary" (click)="save()" [disabled]="!saveButtonEnabled()">
                {{ '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>
        <vdr-form-field [label]="'settings.channel-token' | translate" for="token">
            <input id="token" type="text" formControlName="token" />
        </vdr-form-field>
        <vdr-form-field [label]="'settings.currency' | translate" for="defaultTaxZoneId">
            <select clrSelect name="currencyCode" formControlName="currencyCode">
                <option *ngFor="let code of currencyCodes" [value]="code">{{ code | currencyName }}</option>
            </select>
        </vdr-form-field>
        <vdr-form-field [label]="'settings.prices-include-tax' | translate" for="pricesIncludeTax">
            <div class="toggle-switch">
                <input type="checkbox" id="pricesIncludeTax" formControlName="pricesIncludeTax" />
                <label for="pricesIncludeTax"></label>
            </div>
        </vdr-form-field>
        <vdr-form-field [label]="'settings.default-tax-zone' | translate" for="defaultTaxZoneId">
            <select clrSelect name="defaultTaxZoneId" formControlName="defaultTaxZoneId">
                <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
            </select>
        </vdr-form-field>
        <vdr-form-field [label]="'settings.default-shipping-zone' | translate" for="defaultShippingZoneId">
            <select clrSelect name="defaultShippingZoneId" formControlName="defaultShippingZoneId">
                <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
            </select>
        </vdr-form-field>
    </section>
</form>
