<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="channel-detail"></vdr-action-bar-items>
        <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()"
                *vdrIfPermissions="'SuperAdmin'"
                [disabled]="!saveButtonEnabled()"
            >
                {{ '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" [readonly]="!('SuperAdmin' | hasPermission)" formControlName="code" />
    </vdr-form-field>
    <vdr-form-field [label]="'settings.channel-token' | translate" for="token">
        <input id="token" type="text" [readonly]="!('SuperAdmin' | hasPermission)" formControlName="token" />
    </vdr-form-field>
    <vdr-form-field [label]="'settings.currency' | translate" for="defaultTaxZoneId">
        <select
            clrSelect
            name="currencyCode"
            formControlName="currencyCode"
            [vdrDisabled]="!('SuperAdmin' | hasPermission)"
        >
            <option *ngFor="let code of currencyCodes" [value]="code">{{ code | currencyName }}</option>
        </select>
    </vdr-form-field>
    <vdr-form-field [label]="'common.default-language' | translate" for="defaultLanguage">
        <select
            clrSelect
            name="defaultLanguageCode"
            formControlName="defaultLanguageCode"
            [vdrDisabled]="!('SuperAdmin' | hasPermission)"
        >
            <option *ngFor="let languageCode of availableLanguageCodes$ | async" [value]="languageCode"
                >{{ 'lang.' + languageCode | translate }} ({{ languageCode | uppercase }})</option
            >
        </select>
    </vdr-form-field>
    <vdr-form-field [label]="'settings.prices-include-tax' | translate" for="pricesIncludeTax">
        <clr-toggle-wrapper>
            <input
                type="checkbox"
                clrToggle
                id="pricesIncludeTax"
                formControlName="pricesIncludeTax"
                [vdrDisabled]="!('SuperAdmin' | hasPermission)"
            />
        </clr-toggle-wrapper>
    </vdr-form-field>
    <vdr-form-field [label]="'settings.default-tax-zone' | translate" for="defaultTaxZoneId">
        <select
            clrSelect
            name="defaultTaxZoneId"
            formControlName="defaultTaxZoneId"
            [vdrDisabled]="!('SuperAdmin' | hasPermission)"
        >
            <option *ngFor="let zone of zones$ | async" [value]="zone.id">{{ zone.name }}</option>
        </select>
    </vdr-form-field>
    <clr-alert *ngIf="detailForm.value.code && !detailForm.value.defaultTaxZoneId" clrAlertType="danger" [clrAlertClosable]="false">
        <clr-alert-item>
            <span class="alert-text">
                {{ 'error.no-default-tax-zone-set' | translate }}
            </span>
        </clr-alert-item>
    </clr-alert>

    <vdr-form-field [label]="'settings.default-shipping-zone' | translate" for="defaultShippingZoneId">
        <select
            clrSelect
            name="defaultShippingZoneId"
            formControlName="defaultShippingZoneId"
            [vdrDisabled]="!('SuperAdmin' | hasPermission)"
        >
            <option *ngFor="let zone of zones$ | async" [value]="zone.id">{{ zone.name }}</option>
        </select>
    </vdr-form-field>
    <clr-alert *ngIf="detailForm.value.code && !detailForm.value.defaultShippingZoneId" clrAlertType="warning" [clrAlertClosable]="false">
        <clr-alert-item>
            <span class="alert-text">
                {{ 'error.no-default-shipping-zone-set' | translate }}
            </span>
        </clr-alert-item>
    </clr-alert>
</form>
