<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.name' | translate" for="name">
            <input id="name" type="text" formControlName="name" />
        </vdr-form-field>
        <vdr-form-field [label]="'common.enabled' | translate" for="enabled">
            <div class="toggle-switch">
                <input type="checkbox" id="enabled" formControlName="enabled" />
                <label for="enabled"></label>
            </div>
        </vdr-form-field>
        <vdr-form-field [label]="'settings.rate' | translate" for="value">
            <vdr-affixed-input suffix="%">
                <input id="value" type="number" step="0.1" formControlName="value" />
            </vdr-affixed-input>
        </vdr-form-field>
        <vdr-form-field [label]="'settings.tax-category' | translate" for="taxCategoryId">
            <select clrSelect name="taxCategoryId" formControlName="taxCategoryId">
                <option *ngFor="let taxCategory of (taxCategories$ | async)" [value]="taxCategory.id">
                    {{ taxCategory.name }}
                </option>
            </select>
        </vdr-form-field>
        <vdr-form-field [label]="'settings.zone' | translate" for="zoneId">
            <select clrSelect name="zoneId" formControlName="zoneId">
                <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
            </select>
        </vdr-form-field>
    </section>
</form>
